vue-manage-system升级到vue3的开发总结

前言

近期抽了点时间，对 vue-manage-system 这个项目进行了升级，从 vue2 升级到 vue3、 elementplus、vite、pinia、typescript。这也是对此次升级做了一些细节方面的总结吧。

按需导入

Elment plus 功能较多，但是在项目中并用不到这么多，此时需要按需导入，安装 unplugin-vue-components 和 unplugin-auto-import这两款插件，在 vite.config.ts 中配置插件

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}) 
1
2
3
4
5
6

插件会自动导入 element plus，因此在 main.ts 中不再需要手动导入，