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

// import ElementPlus from 'element-plus';
// import 'element-plus/dist/index.css';
// app.use(ElementPlus);

import VueSetupExtend from 'vite-plugin-vue-setup-extend';
export default defineConfig({
  plugins: [
    // ...
    VueSetupExtend()
  ],
})

<script setup lang="ts" name="table">
...
</script>

// 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();
};

// 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));
};

// main.ts
const permiss = usePermissStore();
app.directive('permiss', {
	mounted(el, binding) {
		if (!permiss.key.includes(String(binding.value))) {
			el['hidden'] = true;
		}
	}
});