vite+vue3+element-plus搭建项目的踩坑记录
作者：周皮皮皮皮皮皮
这篇文章主要介绍了vite+vue3+element-plus搭建项目的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
需求：
因为vue3出了一段时间了，element也出了基于vue3.x版本的element-plus，vite打包听说很快，尝试一下。
一、用vite构建项目
npm install -g create-vite-app create-vite-app vite_demo npm install
二、安装element-plus依赖
在main.js全局引入
PS：
element-plus不兼容element-ui，一些提示类组件前面要加El，比如ElMessage
npm install element-plus
三、main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import store from './store'
import router from './router'
import '/@/permission' // permission control
const app = createApp(App)
app
.use(ElementPlus)
.use(router)
.use(store)
app.mount('#app')四、引入vue-router
区别：
- 引入和vue2.x有区别；
- 引入界面要加后缀.vue
1. 安装4.0.3版本
npm install vue-router@4.0.3
2. router/index.js
// 与vue2.x的区别
// import Vue from 'vue'
// import Router from 'vue-router'
// Vue.use(Router)
import { createRouter, createWebHashHistory } from 'vue-router'
export const constantRoutes = [
// 基础路由
{
path: '/login',
component: () => import('/@/views/login/index.vue'),
hidden: true
},
{
path: '/404',
component: () => import('/@/views/404.vue'),
hidden: true
}
]
const router = createRouter({
routes: constantRoutes,
history: createWebHashHistory()
})
export default router五、引入Vuex
区别：
- 引入和vue2.x的有区别
1. 安装vuex依赖
npm install vuex@4.0.0-rc.2
2. store/index.js
// 和Vue2.x的区别
// import Vue from 'vue'
// import Vuex from 'vuex'
// Vue.use(Vuex)
// const store = new Vuex.Store({})
import { createStore } from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import permission from './modules/permission'
const store = createStore({
modules: {
app,
settings,
user,
permission
},
getters
})
export default store六、配置vite.config.js、env.development
区别：
- 1. 之前是用的vue.config.js，vite用的是vite.config.js，重点是注意路径别名@是/@/
- 2. env.development配置前缀不一样
1. vite.config.js
const path = require('path')
console.log(path.resolve(__dirname, './src'))
module.exports = {
outDir: 'target',
port: 3000,
open: false, // 是否自动在浏览器打开
https: false, // 是否开启 https
ssr: false, // 服务端渲染
optimizeDeps: {
include: ['moment', 'echarts', 'axios', 'mockjs']
},
alias: {
// 注意！键必须以斜线开始和结束
'/@/': path.resolve(__dirname, './src')
},
proxy: {
'/cims': 'http://XXX'
}
}2. env.development，前缀是VITE_
ENV = 'development' # base api VITE_APP_BASE_API = '/cims'
引入使用如下
import.meta.env.VITE_APP_BASE_API
七、登录模块view/login/index
<template>
<div class="login-container">
<el-form
ref="loginForm"
:model="loginForm"
class="login-form"
auto-complete="on"
label-position="left"
>
<div class="content-login">
<el-form-item prop="username">
<span class="svg-container">
</span>
<el-input
ref="username"
v-model="loginForm.username"
placeholder="用户名"
name="username"
type="text"
tabindex="1"
auto-complete="on"
/>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
</span>
<el-input
:key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="密码"
name="password"
tabindex="2"
auto-complete="on"
@keyup.enter.native="handleLogin"
/>
</el-form-item>
<el-button
:loading="loading"
type="primary"
class="btn-login"
@click.native.prevent="handleLogin"
>登 录</el-button>
</div>
</el-form>
</div>
</template><script>
export default {
name: 'Login',
data() {
return {
loginForm: {
username: '',
password: '',
},
loading: false,
passwordType: 'password',
redirect: undefined
}
},
methods: {
handleLogin() {
if (
this.loginForm.username !== '' &&
this.loginForm.password !== '' &&
this.loginForm.code !== ''
) {
this.loading = true
// const that = this
this.$store
.dispatch('user/login', this.loginForm)
.then(user => {
this.$router.push({ path: this.redirect || '/' })
this.changePicCode()
this.loading = false
})
.catch(() => {
this.loginForm.keyId = this.guid()
this.loading = false
})
} else {
this.showErrorInfo('用户名、密码、验证码都必填')
}
}
}
}
</script>
八、引入sass
区别：
- package.json里面sass配置要写在devDependencies
九、其他像axios，permission等
都和vue2.x一样，略写
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。