项目需求
vue2 + element UI 库都已经停止维护了,vue3的使用是必然的,所以把现有项目进行vue3重构 所以我使用了 vite 来搭建这个项目
参考资料
vite 官方中文文档 Vite 最初是为 Vue 3 项目而设计的
element plus vue3 的element 组件库
vue-router vue3,选择router4
vuex Vue 3 匹配的 Vuex 4 的文档
步骤
步骤一 : 使用vite 创建项目
命令行
js
yarn create vite gongan-v3 --template vue
yarn install
yarn dev


注意!! 这里可能出现报错 (node 版本影响的)
不管是npm run dev 还是 yarn dev 都报错,页面启动不起来


处理方法
修改node 版本(到16)我也不知道为什么,我刚好就有3个版本,13 1416的,我换到16的版本就跑起来了


步骤二 : 引入 element plus
命令行
js
npm install element-plus --save
- 它有三种引入方法,具体参考element-plus ,推荐是自动导入

命令行
js
npm install -D unplugin-vue-components unplugin-auto-import
在 .vite.config.ts
页面中
js
// 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()],
}),
],
})
安装
js
# 选择一个你喜欢的包管理器
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue
注册所有图标
js
// 在 main.js 注册
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
步骤三 : 引入 vue-router
js
//安装
npm install vue-router@4
使用 在 src 目录下 新建 router / index

js
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [ {
path: '/', component: ()=>import('../views/Main.vue') ,
redirect:'/home',
children:[ {
path: '/home',
name:'home',
component: ()=>import('../views/home/Home.vue')
},
{ name:'模具变更调价',
path:'',
children: [ {
name: "计算明细",
path: "/hdyMoldComputationDetail",
component: ()=>import('../views/hdyMode/hdyMoldComputationDetail.vue') ,
}]
},
{
name: "价格纠偏管理",
id: "4",
icon: 'FolderChecked',
path:'',
children: [ {
name: "不同模块商同料不同价",
id: "4-1",
path: "/hdyDifferentPriceDifferenceSameMaterial",
component:
()=>import('../views/hdyDifferentPriceDifferenceSameMaterial/hdyDifferentPriceDifferenceSameMaterial.vue')
},
{
name: "衍生号价格联动",
id: "4-5",
path:'',
children: [ {
name: "衍生号与基准号的关系",
id: "4-5-1",
path: "/hdyDrivativeBenchmarkRelationship",
component: ()=>import('../views/hdyDrivativeBenchmarkRelationship/hdyDrivativeBenchmarkRelationship.vue') }]
}, {
name: "衍生同价异号",
id: "4-7",
path:'',
children: [ {
name: "同价异号对应关系",
id: "4-6-1",
path: "/hdySamePriceDifferentCodeRelationship",
component: ()=>import('../views/hdySamePriceDifferentCodeRelationship/hdySamePriceDifferentCodeRelationship.vue')
},
{
name: "降本挖掘联动",
id: "4-12",
path:'',
children: [ {
name: "预案管理",
id: "4-12-1",
path: "/ProcurementPlan",
component: ()=>import('../views/ProcurementPlan/ProcurementPlan.vue') }]
}
]
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes,
// `routes: routes` 的缩写
})
export default router
在 main.js 中导入

js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
// 引入icon 图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 引入store
import store from './store/index.js'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(router).use(store)
app.mount('#app')
页面中使用
vue3中

这个是vue2 的 vue-router 和 vue3 使用方法有差异

js
// 需要引入 useRoute
<script setup>
import {useRoute} from 'vue-router'
const route =useRoute()
</script>
步骤四 : 引入 vuex
lua
安装
npm install vuex@next --save
使用
在scr 目录下创建 store /index.js

js
import { createStore } from 'vuex'
// 创建一个新的 store 实例
export default createStore({
state :{
data:0,
isCollapse:false
},
mutations: {
increment (state) {
state.count++
},
updateIsCollapse(state){
state.isCollapse = !state.isCollapse
}
}
})
在页面中使用
vue3 中
这个是vue2 的vuex 和 vue3 使用方法有差异

js
// 需要引入 useStore
<script setup>
import {useStore} from 'vuex'
const store = useStore()
</script>
以上就是搭架子的过程 ,其中逐步完善了,动态侧边栏的部分,vue-router + vuex 都是为动态侧边栏服务的,包括动态的icon 则是使用element-plus中 icon 来实现的