使用Vite搭建一个Vue3+ElementUI-Plus，以及集成Vue Router的过程。本次搭建过程的Nodejs版本为 V19.9.0
创建项目
初始化项目
npm init vite@latest my-vue-app -- --template vue添加依赖并运行
然后进入到刚刚创建的项目目录中安装依赖，并运行：
cd my-vue-app
npm install
npm run dev
经过上面几步一个简单的Vite+Vue项目就搭建并运行完成了。
添加路由
为了后续的使用方便，添加路由的依赖并进行配置它
添加依赖
这里我们使用最新的Vue Router 版本
npm install vue-router@4添加路由配置文件
添加完路由依赖以后需要在src目录下创建一个router文件夹，以及在router文件夹内创建一个它的配置文件——index.js，下面是index.js文件内容：
// 路由文件
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中创建路由和使用历史模式的方法都发生了改变，其余使用方式大致相同。
在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这个页面，下面我们创建一下，在src目录下创建文件夹views，然后在其添加Home.vue，内容如下：
<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框架，它已经支持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调用组件时还需要手动的引用样式，例如我们想使用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的主题颜色
在上面的步骤中已经添加了sass和sass-loader的依赖，因此可以直接配置主题文件，首先在src目录下新建style.scss，然后里面添加如下内容：
@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({
//一下为新添加的内容
resolve: {
alias: {
'~/': `${path.resolve(__dirname, 'src')}/`,
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~/style.scss" as *;`,
},
},
},
//一下为之前的配置内容
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver({
importStyle: 'sass'
)],
}),
ElementPlus({
useSource: true,
})
]
})此时我们看一下效果
注意事项：
- Vite默认不能使用IP地址进行访问调试，如果需要使用IP地址进行访问调试可以在vite.config.js中配置server的host指定IP地址
- Vite打包后需要放到服务器中运行
以上就是Vite+Vue+ElementUI-Plus项目的大致搭建过程，详细配置内容可以查看官方文档。
发表回复