vue 升级3 +vite+antdv4-编程知识

一、安装包相关升级

二、vite.config

三、入口文件修改

四、App.vue 及相关升级

五、路由

六、状态管理VUEX

一、安装包相关升级

升级pakage.json相关安装包

vue2插件	vue3替换插件	vue2使用	vue3使用
vue-ls	vuex-persistedstate或vuex-persist	Vue.ls.get() Vue.ls.set()	直接操作store相关
k-form-design	k-designer
vue-contextmenu	可使用ui组件	<vue-context-menu :contextMenuData="[]" @deleteLink="deleteLink"> </vue-context-menu	<a-dropdown :trigger="['contextmenu']">
vcolorpicker	可使用ui组件
@jiaminghi/data-view	echarts
vue-json-viewer	vue3-json-viewer
vue-draggable	vue-draggable-next
moment	dayjs

升级nodejs15版本及以上

1.安装vite

npm i vite -g
npm create vite@latest

#相关目录文件，注意：vue-cli生成index.html在public下要改为根目录

.package.json

删除vue-cli相关，修改

"serve": "vue-cli-service serve",
"build": "vue-cli-service build"

为

{"name": "vue-antd-pro","version": "2.1.0","private": true,"scripts": {"dev": "vite --mode development","build": "vite build","serve": "vite preview","lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src","test:unit": "vue-cli-service test:unit","build:preview": "vue-cli-service build --mode preview","postinstall": "opencollective-postinstall"},"dependencies": {"@aspnet/signalr": "^1.0.27","@microsoft/signalr": "^7.0.5","@rollup/plugin-inject": "^5.0.3","@vitejs/plugin-vue-jsx": "^3.0.1","@vue/compat": "^3.3.4","@vueuse/core": "^6.7.3","ant-design-vue": "^4.0.0-rc.4","axios": "^1.4.0","babel-plugin-transform-remove-strict-mode": "0.0.2","babel-polyfill": "^6.26.0","echarts": "^5.4.2","eslint": "^8.40.0","eslint-plugin-vue": "^9.13.0","jquery": "^3.5.1","jquery-ui": "1.13.0","k-designer": "^0.0.42","md5": "^2.2.1","mockjs2": "1.0.8","nprogress": "^0.2.0","vite": "^4.3.9","vite-plugin-svg-icons": "^2.0.1","vue": "^3.3.4","vue-clipboard2": "^0.2.1","vue-codemirror-lite": "^1.0.4","vue-cropper": "^0.5.11","vue-draggable-next": "^2.1.1","vue-qr": "^4.0.9","vue-quill-editor": "^3.0.6","vue-router": "^4.2.0","vue3-json-viewer": "^2.2.2","vuex": "^4.1.0","vuex-persistedstate": "^4.1.0","wangeditor": "^4.7.15",},"devDependencies": {"@ant-design/colors": "^3.2.1","@typescript-eslint/eslint-plugin": "^5.59.6","@typescript-eslint/parser": "^5.59.6","@vitejs/plugin-vue": "^1.6.1","@vitejs/plugin-vue-jsx": "^3.0.1","@vitejs/plugin-vue2": "^2.2.0","@vue/compiler-sfc": "^3.3.4","@vue/eslint-config-prettier": "^7.1.0","@vue/eslint-config-standard": "^8.0.1","@vue/test-utils": "^2.3.2","@zougt/some-loader-utils": "^1.4.3","@zougt/vite-plugin-theme-preprocessor": "^1.4.8","autoprefixer": "^10.4.14","babel-plugin-import": "^1.13.0","babel-plugin-transform-remove-console": "^6.9.4","eslint": "^8.40.0","eslint-config-prettier": "^8.8.0","eslint-plugin-html": "^5.0.0","eslint-plugin-prettier": "^4.2.1","eslint-plugin-vue": "^9.13.0","less": "^3.0.4","less-loader": "^5.0.0","postcss": "^8.4.23","postcss-loader": "^7.3.0","prettier": "^2.8.8","sass": "1.32.0","stylus": "^0.54.8","unplugin-vue-components": "^0.24.1","vite": "^4.3.8","vite-plugin-compression": "^0.5.1","vite-plugin-require": "^1.1.10","vite-plugin-theme": "^0.8.6","vue-eslint-parser": "^9.3.0"},"main": ".eslintrc.js","directories": {"test": "tests"},"keywords": [],"author": "","license": "ISC","description": ""
}

二、vite.config

const path = require("path");
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginRequire from 'vite-plugin-require';
import inject from '@rollup/plugin-inject';
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import viteCompression from "vite-plugin-compression";
import vueJsx from '@vitejs/plugin-vue-jsx'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({// base: './',  // 开发或生产环境服务的公共基础路径径envDir: './env',plugins: [vue({template: {compilerOptions: {compatConfig: {MODE: 3 // vue2还是vue3模式}}}}),vueJsx(),vitePluginRequire(),inject({$: "jquery",  // 这里会自动载入 node_modules 中的 jquery   jquery全局变量jQuery: "jquery","windows.jQuery": "jquery"}),createSvgIconsPlugin({// 要缓存的图标文件夹iconDirs: [path.resolve(__dirname, 'src/assets/icons')],// 执行 icon name 的格式symbolId: 'icon-[name]'}),Components({dts: 'src/types/components.d.ts',include: [/\.vue$/, /\.tsx$/],resolvers: [ AntDesignVueResolver({// 参数配置可参考：https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts// 自动引入 ant-design/icons-vue中的图标，需要安装@ant-design/icons-vue// importStyle: 'less',importStyle: false,resolveIcons: true,})]}),viteCompression() // gzip],// publicDir: 'public',cacheDir: 'node_modules/.vite',resolve: {alias: {"@": path.resolve(__dirname, "./src"),'vue': 'vue/dist/vue.esm-bundler.js',// vue: '@vue/compat',},extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], // 忽略文件后缀},css: {preprocessorOptions: {less: {javascriptEnabled: true}}},// 服务的配置server: {cors: false,// 主机名host: '0.0.0.0',// 端口port: 8080,// 端口被占用调用下个端口strictPort: false,// boolean | String 如果是boolean且为true 会自动打开浏览器。 配置是字符串 会被用作 URL 的路径名open: false,/*服务器代理地址，用于代理到后台的服务器。*/// proxy: createProxy(),// force: true // 强制使依赖预构建。//fs: {strict: false}},// 正式环境的配置build: {// 去除console debugterserOptions: {compress: {drop_console: true,drop_debugger: true}},target: 'modules',// target: 'es2015',// 指定输出的路径，相当于项目根目录// outDir: mode.includes('production.hr') ? 'dist/hr' : 'dist/uc',// 静态资源存放路径，相对于outDir// assetsDir: 'public/',// 小于此配置的会被base64编码，0为完全禁用assetsInlineLimit: 4096,// 启用/禁用css代码拆分  如果禁用整个项目所有css将会提取为一个csscssCodeSplit: true,// boolean| inline 构建后是不是生产source map 文件sourcemap: false,// 启用和禁用压缩报告brotliSize: true,// chunk大小警告// chunkSizeWarningLimit: 500,minify: true,  //打包结果取消minify，方便我们看打包后结果对比 'terser'chunkSizeWarningLimit: 500,rollupOptions: {// input: resolve(__dirname, 'index.html'),output: {chunkFileNames: 'static/js/[name]-[hash].js',entryFileNames: 'static/js/[name]-[hash].js',assetFileNames: 'static/[ext]/[name]-[hash].[ext]',manualChunks(id) {if (id.includes('node_modules')) {return 'vendor';}},brotliSize: false, // 不统计target: 'esnext',minify: 'esbuild' // 混淆器，terser构建后文件体积更小},},}})

三、入口文件修改

index.html ，全局main.js引入

<script type="module" src="./src/main.js"></script>

main.js

根据项目已有插件进行升级，注意app创建实例已修改,以下为参考

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/store/index';
import { Modal, message, notification  } from 'ant-design-vue'
import { VueAxios } from './utils/request'
import '@/components/flow/style/flow-designer.scss'
import './components/global.less'
import '@/components/index.less'
import './permission.js' // permission control
import './utils/filter' // global filter
import 'regenerator-runtime/runtime'
import 'core-js/stable'
import socket from './utils/socket'
import { sysApplication } from './utils/applocation'
import { hasBtnPermission } from './utils/permissions' // button permission
import dictionary from './utils/dictionary'// 引入k-designer表单设计器相关，该设计器适用于antdv3版本
// import 'ant-design-vue/dist/reset.css';
import "k-designer/dist/style.css";
setupAntd(pluginManager);
import { pluginManager } from "k-designer";
import { setupAntd } from "k-designer/dist/ui/antd";
setupAntd(pluginManager);import * as echarts from 'echarts'
const app = createApp(App)// 代替Vue2 Vue.use
app.use(router)
app.use(store)
app.use(socket, '/hubs/chatHub')// 全局注册图标组件
import 'virtual:svg-icons-register'
import * as Icons from '@ant-design/icons-vue'Object.keys(Icons).map(key => {app.component(key, Icons[key])
})// 代替Vue2 Vue.prototype
app.config.globalProperties.$confirm = Modal.confirm
app.config.globalProperties.$message = message
app.config.globalProperties.$notification = notification
app.config.globalProperties.$info = Modal.info
app.config.globalProperties.$success = Modal.success
app.config.globalProperties.$error = Modal.error
app.config.globalProperties.$warning = Modal.warning
app.config.globalProperties.VueAxios = VueAxios;
app.config.globalProperties.hasPerm = hasBtnPermission;
app.config.globalProperties.applocation = sysApplication;
app.config.globalProperties.dic = dictionary;
app.config.globalProperties.$echarts = echarts;
app.mount('#app')

四、App.vue 及相关<router-view>升级

<router-view class="page" v-slot="{ Component }"><transition name="route" mode="out-in"><component :is="Component"></component></transition>
</router-view>

<router-view class="page" v-slot="{ Component }"><keep-alive><component :is="Component" /></keep-alive>
</router-view>

五、路由

npm install vue-router@4

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import { constantRouterMap } from '@/config/router.config'
import '@/components/NProgress/nprogress.less' // progress bar custom styleconst router = createRouter({history: createWebHistory(), // history模式 createWebHashHistory hash模式base: import.meta.env.VITE_APP_API_BASE_URL,scrollBehavior: () => ({ y: 0 }),routes: constantRouterMap  // 路由表
})// 前增加下面代码，添加一个临时路由
console.log(router.hasRoute(), window.location.pathname)
// if (!router.hasRoute()) {
//   router.addRoute({
//     path: window.location.pathname,
//     name: 'TempRoute',
//     component: () => import('@/views/system/exception/404.vue')
//   })
// }export default router

六、状态管理VUEX

npm install vuex@next

import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate' // 持久化state, 代替vue-ls相关
export default createStore({  // 替代之前的 new Vuex.Store()state: {},mutations: {},actions: {},plugins: [createPersistedState({storage: window.localStorage //可为window.sessionstorage})]
});