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+TypeScript埋點方面的應(yīng)用實踐
本文詳細闡述了如何在Vue3中使用TypeScript實現(xiàn)埋點功能,包括全局注冊$track插件、Mixin實現(xiàn)全局埋點等,隨著Vue3的逐漸普及,在實際工作中采用Vue3+TypeScript實現(xiàn)埋點將會變得越來越流行2023-08-08
@font-face?是?CSS?中的一個規(guī)則,它允許你加載服務(wù)器上的字體文件（遠程或者本地）,并在網(wǎng)頁中使用這些字體,本文給大家介紹了Vue使用font-face自定義字體的案例,并通過代碼講解的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了關(guān)于Vue組件間的常用傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+vant-UI框架實現(xiàn)購物車的復(fù)選框全選和反選功能
這篇文章主要介紹了vue+vant-UI框架實現(xiàn)購物車的復(fù)選框全選和反選功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計。這篇文章主要介紹了VueJS全面解析的相關(guān)資料,需要的朋友可以參考下2016-11-11
vue3 useRoute無法獲取get參數(shù)的問題解決
本文主要介紹了vue3 useRoute無法獲取get參數(shù)的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
Vue?結(jié)合Sortablejs實現(xiàn)table行排序功能
在一個列表展示頁面上，使用了表格組件，原有組件本身不支持拖拽功能，需求要求在列表的基礎(chǔ)上支持行拖拽排序，因此引入了www.sortablejs.com插件，接下來通過本文給大家講解Vue?結(jié)合Sortablejs實現(xiàn)table行排序功能,需要的朋友可以參考下2022-10-10
Vue中使用element-ui給按鈕綁定一個單擊事件實現(xiàn)點擊按鈕就彈出dialog對話框
最近遇到了個需求是使用element-ui插件編寫頁面,點擊按鈕,彈出對話框,這篇文章主要給大家介紹了關(guān)于Vue中使用element-ui給按鈕綁定一個單擊事件實現(xiàn)點擊按鈕就彈出dialog對話框的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue3 Element-plus el-menu無限級菜單組件封裝過程
對于element中提供給我們的el-menu組件最多可以實現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無限級菜單組件封裝,需要的朋友可以參考下2023-04-04
vxe-table中vxe-grid(高級表格)的使用方法舉例
vxe-table是一個基于vue的表格組件,下面這篇文章主要給大家介紹了關(guān)于vxe-table中vxe-grid(高級表格)的使用方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05