利用Vite搭建Vue3+ElementUI-Plus項目的全過程
本文主要記錄使用Vite搭建一個Vue3+ElementUI-Plus，以及集成Vue Router的過程。本次搭建過程的Nodejs版本為 V16.14.2
創(chuàng)建項目
初始化項目
使用vite創(chuàng)建一個vite+vue的項目
npm init vite@latest my-vue-app -- --template vue
注意：npm7+后面需要多添加的雙橫杠
my-vue-app是項目的名稱，可以根據(jù)自己的需要修改，后面--template vue表示創(chuàng)建一個vue模板項目。
添加依賴并運行
然后進入到剛剛創(chuàng)建的項目目錄中安裝依賴，并運行：
cd my-vue-app npm install npm run dev
經(jīng)過上面幾步一個簡單的Vite+Vue項目就搭建并運行完成了。
添加路由
為了后續(xù)的使用方便，添加路由的依賴并進行配置
添加依賴
這里我們使用最新的Vue Router 版本
npm install vue-router@4
添加路由配置文件
添加完路由依賴以后需要在src目錄下創(chuàng)建一個router文件夾，以及在router文件夾內(nèi)創(chuàng)建一個它的配置文件——index.js，下面是index.js文件內(nèi)容：
// 路由文件
import { createRouter, createWebHistory } from "vue-router";
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to,from)=>{
// if(to.meta.requireAuth) {
// let token = localStorage.getItem('auth-system-token');
// let isLogin = localStorage.getItem('auth-system-login');
// if(!token||!isLogin){
// return {
// path: '/login'
// }
// }
// }
})
export default router;
需要注意的是在最新的Vue Router中創(chuàng)建路由和使用歷史模式的方法都發(fā)生了改變，其余使用方式大致相同。
在main.js中添加路由
import { createApp } from 'vue'
import App from './App.vue'
import Router from './router/index.js'
createApp(App).use(Router).mount('#app')
添加Home頁面進行測試
在上面的index.js文件中配置了Home這個頁面，下面我們創(chuàng)建一下，在src目錄下創(chuàng)建文件夾views，然后在其添加Home.vue，內(nèi)容如下：
<template>
<div class="home">
<h1>Home Page</h1>
</div>
</template>
<script>
export default {
data(){
return{}
}
}
</script>
然后在App.vue中使用router-view進行路由，讓其顯示
//App.vue
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<router-view/>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
此時運行頁面如下
添加ElementUI-Plus
為了更方便快速的做出整齊美觀的頁面我們這里使用ElementUI-Plus作為UI框架，它已經(jīng)支持Vue3.
安裝element-plus依賴
npm install element-plus --save
引入element-plus依賴
本文使用的依賴方式為按需應用中的自動導入，按需應用可以減少打包后文件的大小，如果不在乎大小也可使用全局引用。
要使用按需引用中的自動導入需要安裝額外的兩個插件：unplugin-vue-components和unplugin-auto-import
npm install -D unplugin-vue-components unplugin-auto-import
安裝完成后我們需要配置一下項目根目錄的vite的配置文件——vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
]
})
配置完上面的這些以后基本上就可以使用了，但是當使用ElementUI的API調(diào)用組件時還需要手動的引用樣式，例如我們想使用ElMessage這個組件，需要引入組件并引入它的樣式文件：
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
如果不喜歡這樣每次配置樣式也可以使用插件unplugin-element-plus來導入樣式，安裝它前需要添加sass和sass-loader依賴
npm install sass sass-loader unplugin-element-plus
然后在vite.config.js配置文件中添加配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
ElementPlus({
useSource: true
})
]
})
修改Home.vue進行測試：
<template>
<div class="home">
<h1>Home Page</h1>
<el-button @click="showMessage" type="primary">ElementUI-Plus</el-button>
</div>
</template>
<script>
import {ElMessage} from 'element-plus'
export default {
data(){
return{}
},
methods:{
showMessage(){
ElMessage({type: 'success',message:'測試成功'})
}
}
}
</script>
運行效果
引入Element Icon
添加依賴
npm install @element-plus/icons-vue
將icon在main.js進行全局注冊
import { createApp } from 'vue'
import App from './App.vue'
import Router from './router/index.js'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
app.use(Router).use(JsonViewer).mount('#app');
//全局注冊Element Icon
for (let iconName in ElementPlusIconsVue) {
app.component(iconName, ElementPlusIconsVue[iconName])
}
給Home.vue中的按鈕添加圖標測試
<el-button @click="showMessage" type="primary" icon="Check">ElementUI-Plus</el-button>
運行效果
修改element的主題顏色
在上面的步驟中已經(jīng)添加了sass和sass-loader的依賴，因此可以直接配置主題文件，首先在src目錄下新建style.scss，然后里面添加如下內(nèi)容：
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': #333333,
),
),
);
例如我們修改primary顏色為#333333顏色，然后在vite.config.js中添加配置：
import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'
// https://vitejs.dev/config/
export default defineConfig({
//一下為新添加的內(nèi)容
resolve: {
alias: {
'~/': `${path.resolve(__dirname, 'src')}/`,
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~/style.scss" as *;`,
},
},
},
//一下為之前的配置內(nèi)容
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
ElementPlus({
useSource: true,
})
]
})
此時我們看一下效果
注意事項：
- Vite默認不能使用IP地址進行訪問調(diào)試，如果需要使用IP地址進行訪問調(diào)試可以在vite.config.js中配置server的host指定IP地址
- Vite打包后需要放到服務器中運行
以上就是Vite+Vue+ElementUI-Plus項目的大致搭建過程，詳細配置內(nèi)容可以查看官方文檔。
總結(jié)
到此這篇關于利用Vite搭建Vue3+ElementUI-Plus項目的文章就介紹到這了,更多相關Vite搭建Vue3 ElementUI-Plus項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue3 elementUI如何修改el-date-picker默認時間
這篇文章主要介紹了Vue3 elementUI如何修改el-date-picker默認時間，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue3編寫掛載DOM的插件的問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-07-07
本文主要介紹了Vue3中事件總線的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
最近項目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關于el-popover如何通過js手動控制彈出框顯示、隱藏的相關資料,需要的朋友可以參考下2023-12-12
vue3中的watch是一個組合式的API使用時需要引入,下面這篇文章主要給大家介紹了關于vue3下watch使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼
本文主要介紹了Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
vue中報錯Duplicate?keys?detected:'1'.?This?may?c
我們在vue開發(fā)過程中常會遇到一些錯誤,這篇文章主要給大家介紹了關于vue中報錯Duplicate?keys?detected:‘1‘.?This?may?cause?an?update?error的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項
這篇文章主要介紹了解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項目上線白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue中的插件：Vuex。本文將圍繞它的優(yōu)缺點、使用場景和示例展開詳細的說明，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
在Vue中，修飾符處理了許多DOM事件的細節(jié)，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理2022-10-10