我报名参加1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情
前言
近期抽了点时间，对 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()],
}),
],
})
插件会自动导入 element plus，因此在 main.ts 中不再需要手动导入，否则插件的按需导入将不生效。
// import ElementPlus from 'element-plus';
// import 'element-plus/dist/index.css';
// app.use(ElementPlus);
组件的 name 选项
在项目中通过 <KeepAlive> 内置组件的 include prop 来缓存组件实例，它会根据组件的 name 选项进行匹配，因此必须显式声明一个 name 选项。在 vue2 中使用选项式api开发时可以很简单的设置 name 选项，在 vue3 中使用组合式api，便不能同选项式api一样了。在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。不过我们想要自定义组件 name ，可以使用 vite-plugin-vue-setup-extend 插件。在 vite.config.ts 中加上配置
import VueSetupExtend from 'vite-plugin-vue-setup-extend';
export default defineConfig({
plugins: [
// ...
VueSetupExtend()
],
})
便可在 vue 单文件中定义 name 选项了
<script setup lang="ts" name="table">
...
</script>
pinia
在项目中用 pinia 来替代 vuex，它也是一个跨组件/页面共享状态的存储库，与 Vuex 相比，不再需要 mutations，使用起来更加方便。
// sidebar.ts
import { defineStore } from 'pinia';
export const useSidebarStore = defineStore('sidebar', {
state: () => {
return {
// 控制侧边栏的折叠
collapse: false
};
},
actions: {
handleCollapse() {
this.collapse = !this.collapse;
}
}
});
// header.vue
import { useSidebarStore } from '../store/sidebar';
const sidebar = useSidebarStore();
// 侧边栏折叠
const collapseChage = () => {
sidebar.handleCollapse();
};
权限管理
在项目中，不同的角色对应不同的权限，低权限的角色，无法进入高权限的页面，通过vue自定义指令来实现入口的隐藏。 使用pinia来管理当前用户的权限，并在页面刷新时从本地存储中获得，以免刷新后数据丢失
// permiss.ts
import { defineStore } from 'pinia';
interface ObjectList {
[key: string]: string[];
}
export const usePermissStore = defineStore('permiss', {
state: () => {
const keys = localStorage.getItem('ms_keys');
return {
key: keys ? JSON.parse(keys) : <string[]>[],
defaultList: <ObjectList>{
admin: ['1', '2', '3', '4', '5],
user: ['1', '2']
}
};
},
actions: {
handleSet(val: string[]) {
this.key = val;
}
}
});
在用户登录之后，根据用户角色来获取对应权限（此处为本地示例项目，权限未从服务器获取）
// login.vue
const permiss = usePermissStore();
const submitForm = (formEl: FormInstance | undefined) => {
// ....
const keys = permiss.defaultList[param.username == 'admin' ? 'admin' : 'user'];
permiss.handleSet(keys);
localStorage.setItem('ms_keys', JSON.stringify(keys));
};
在自定义指令中，对不在权限中的节点进行隐藏，在CSS中设置带hidden属性的display为none即可简单实现
// main.ts
const permiss = usePermissStore();
app.directive('permiss', {
mounted(el, binding) {
if (!permiss.key.includes(String(binding.value))) {
el['hidden'] = true;
}
}
});
在侧边导航元素加上 v-premiss="xx" 即可实现不同权限的显示与隐藏。
Typescript
原先自己对Typescript也没有多大的兴趣，在自己项目中使用了之后，逐渐有了兴趣，发现还挺好用的，类型推断，自动提示，错误提示等都挺不错的。不过自己用的也是比较简单，还需要再深入学习。
总结
由于该项目中不包含任何业务代码，所以还是相对比较简单的，不过从开发中还是积累了一些经验，在其它项目中可以更加熟练地开发。自己在维护项目的同时，有认真的想过了，每个产品都要有自己的定位，而我对这个产品的定位就是要足够简单，又能满足管理后台快速开发的需求，以便外包项目快速完成，因此我不需要太多花里胡哨的功能，而且还削减了部分功能，比如i18n国际化。如果有什么好的建议，可以开 issue 一起讨论。项目地址：vue-manage-system