vue-manage-system升级到vue3的开发总结分析
目录
- 前言
- 按需导入
- 组件的 name 选项
- pinia
- 权限管理
- Typescript
- 总结
前言
近期抽了点时间,对 vue-manage-system 这个项目进行了升级,从 vue2 升级到 vue3、 elementplus、vite、pinia、typescript。这也是对此次升级做了一些细节方面的总结吧。
按需导入
Elment plus 功能较多,但是在项目中并用不到这么多,此时需要按需导入,安装 unplugin-vue-components 和 unplugin-auto-import这两款插件,在 vite.config.ts 中配置插件
插件会自动导入 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
以上就是vue-manage-system升级到vue3的开发总结分析的详细内容,更多关于vue-manage-system升级vue3的资料请关注我们其它相关文章!