创建vue3项目步骤

项目需求

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()],
    }),
  ],
})

引入 element-plus icon

安装

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 来实现的