vite+vue3+element-plus搭建項目的踩坑記錄
更新時間：2023年10月09日 09:38:18 作者：周皮皮皮皮皮皮
這篇文章主要介紹了vite+vue3+element-plus搭建項目的踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
需求：
因為vue3出了一段時間了，element也出了基于vue3.x版本的element-plus，vite打包聽說很快，嘗試一下。
一、用vite構(gòu)建項目
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
區(qū)別：
- 引入和vue2.x有區(qū)別；
- 引入界面要加后綴.vue
1. 安裝4.0.3版本
npm install vue-router@4.0.3
2. router/index.js
// 與vue2.x的區(qū)別
// import Vue from 'vue'
// import Router from 'vue-router'
// Vue.use(Router)
import { createRouter, createWebHashHistory } from 'vue-router'
export const constantRoutes = [
// 基礎(chǔ)路由
{
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
區(qū)別：
- 引入和vue2.x的有區(qū)別
1. 安裝vuex依賴
npm install vuex@4.0.0-rc.2
2. store/index.js
// 和Vue2.x的區(qū)別
// 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
區(qū)別：
- 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, // 服務(wù)端渲染
optimizeDeps: {
include: ['moment', 'echarts', 'axios', 'mockjs']
},
alias: {
// 注意！鍵必須以斜線開始和結(jié)束
'/@/': 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
區(qū)別：
- package.json里面sass配置要寫在devDependencies
九、其他像axios，permission等
都和vue2.x一樣，略寫
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3界面使用router及使用watch監(jiān)聽router的改變
vue2中使用router非常簡單，但是vue3中略微有些改變，通過本文講解下他的改變，對vue3?watch監(jiān)聽router相關(guān)知識感興趣的朋友一起看看吧2022-11-11
這篇文章主要為大家介紹了element表格行列的動態(tài)合并示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue祖孫組件之間的數(shù)據(jù)傳遞案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
vue3+elementUI實現(xiàn)懸浮多行文本輸入框效果
這篇文章主要為大家詳細介紹了vue3如何引用elementUI實現(xiàn)懸浮文本輸入框效果,以便實現(xiàn)多行文本輸入,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁面實現(xiàn)方式
本文講述如何實現(xiàn)擁有酷炫背景視頻的登錄頁面，瀏覽器窗口隨意拉伸，背景視頻及前景登錄組件均能完美適配，背景視頻可始終鋪滿窗口，前景組件始終居中，視頻的內(nèi)容始終得到最大限度的保留，可以得到最好的視覺效果2018-01-01
這篇文章主要介紹了vue的url請求圖片的問題及請求失敗解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
vue組件實現(xiàn)移動端九宮格轉(zhuǎn)盤抽獎
這篇文章主要為大家詳細介紹了vue組件實現(xiàn)移動端九宮格轉(zhuǎn)盤抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
vue3自定義指令自動獲取節(jié)點的width和height代碼示例
這篇文章主要介紹了如何使用ResizeObserver監(jiān)聽組件的寬度和高度,并將其封裝成一個指令以便全局或局部使用,ResizeObserver可以監(jiān)聽元素的多個尺寸屬性,如top、bottom、left等,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-11-11
vue-cli 自定義指令directive 添加驗證滑塊示例
本篇文章主要介紹了vue-cli 自定義指令directive 添加驗證滑塊示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
隨著現(xiàn)代前端框架的發(fā)展,懶加載作為一種優(yōu)秀的性能優(yōu)化技術(shù),在用戶體驗和加載速度上扮演著越來越重要的角色,本文將詳細介紹如何在 Vue 3 中實現(xiàn)懶加載組件,確保你能夠?qū)⑦@一技術(shù)應(yīng)用到自己的項目中,需要的朋友可以參考下2024-11-11