vue-manage-system升级vue3

时间:2022-09-29 小黄鸭来了人气:0

前言

近期抽了点时间，对 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) =&gt; {
	// ....
	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

加载全部内容