likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 8

我报名参加金石计划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