前言

近期抽了點(diǎn)時(shí)間，對(duì) vue-manage-system 這個(gè)項(xiàng)目進(jìn)行了升級(jí)，從 vue2 升級(jí)到 vue3、 elementplus、vite、pinia、typescript。這也是對(duì)此次升級(jí)做了一些細(xì)節(jié)方面的總結(jié)吧。

按需導(dǎo)入

Elment plus 功能較多，但是在項(xiàng)目中并用不到這么多，此時(shí)需要按需導(dǎo)入，安裝 unplugin-vue-components 和 unplugin-auto-import這兩款插件，在 vite.config.ts 中配置插件

插件會(huì)自動(dòng)導(dǎo)入 element plus，因此在 main.ts 中不再需要手動(dòng)導(dǎo)入，否則插件的按需導(dǎo)入將不生效。

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

組件的 name 選項(xiàng)

在項(xiàng)目中通過 <KeepAlive> 內(nèi)置組件的 include prop 來緩存組件實(shí)例，它會(huì)根據(jù)組件的 name 選項(xiàng)進(jìn)行匹配，因此必須顯式聲明一個(gè) name 選項(xiàng)。在 vue2 中使用選項(xiàng)式api開發(fā)時(shí)可以很簡(jiǎn)單的設(shè)置 name 選項(xiàng)，在 vue3 中使用組合式api，便不能同選項(xiàng)式api一樣了。在 3.2.34 或以上的版本中，使用 <script setup> 的單文件組件會(huì)自動(dòng)根據(jù)文件名生成對(duì)應(yīng)的 name 選項(xiàng)，無需再手動(dòng)聲明。不過我們想要自定義組件 name ，可以使用 vite-plugin-vue-setup-extend 插件。在 vite.config.ts 中加上配置

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

便可在 vue 單文件中定義 name 選項(xiàng)了

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

pinia

在項(xiàng)目中用 pinia 來替代 vuex，它也是一個(gè)跨組件/頁面共享狀態(tài)的存儲(chǔ)庫，與 Vuex 相比，不再需要 mutations，使用起來更加方便。

// sidebar.ts
import { defineStore } from 'pinia';
export const useSidebarStore = defineStore('sidebar', {
	state: () => {
		return {
			// 控制側(cè)邊欄的折疊
			collapse: false
		};
	},
	actions: {
		handleCollapse() {
			this.collapse = !this.collapse;
		}
	}
});

// header.vue
import { useSidebarStore } from '../store/sidebar';
const sidebar = useSidebarStore();
// 側(cè)邊欄折疊
const collapseChage = () => {
	sidebar.handleCollapse();
};

權(quán)限管理

在項(xiàng)目中，不同的角色對(duì)應(yīng)不同的權(quán)限，低權(quán)限的角色，無法進(jìn)入高權(quán)限的頁面，通過vue自定義指令來實(shí)現(xiàn)入口的隱藏。 使用pinia來管理當(dāng)前用戶的權(quán)限，并在頁面刷新時(shí)從本地存儲(chǔ)中獲得，以免刷新后數(shù)據(jù)丟失

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

在用戶登錄之后，根據(jù)用戶角色來獲取對(duì)應(yīng)權(quán)限（此處為本地示例項(xiàng)目，權(quán)限未從服務(wù)器獲?。?/p>

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

在自定義指令中，對(duì)不在權(quán)限中的節(jié)點(diǎn)進(jìn)行隱藏，在CSS中設(shè)置帶hidden屬性的display為none即可簡(jiǎn)單實(shí)現(xiàn)

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

在側(cè)邊導(dǎo)航元素加上 v-premiss="xx" 即可實(shí)現(xiàn)不同權(quán)限的顯示與隱藏。

Typescript

原先自己對(duì)Typescript也沒有多大的興趣，在自己項(xiàng)目中使用了之后，逐漸有了興趣，發(fā)現(xiàn)還挺好用的，類型推斷，自動(dòng)提示，錯(cuò)誤提示等都挺不錯(cuò)的。不過自己用的也是比較簡(jiǎn)單，還需要再深入學(xué)習(xí)。

總結(jié)

由于該項(xiàng)目中不包含任何業(yè)務(wù)代碼，所以還是相對(duì)比較簡(jiǎn)單的，不過從開發(fā)中還是積累了一些經(jīng)驗(yàn)，在其它項(xiàng)目中可以更加熟練地開發(fā)。自己在維護(hù)項(xiàng)目的同時(shí)，有認(rèn)真的想過了，每個(gè)產(chǎn)品都要有自己的定位，而我對(duì)這個(gè)產(chǎn)品的定位就是要足夠簡(jiǎn)單，又能滿足管理后臺(tái)快速開發(fā)的需求，以便外包項(xiàng)目快速完成，因此我不需要太多花里胡哨的功能，而且還削減了部分功能，比如i18n國際化。如果有什么好的建議，可以開 issue 一起討論。項(xiàng)目地址：vue-manage-system

以上就是vue-manage-system升級(jí)到vue3的開發(fā)總結(jié)分析的詳細(xì)內(nèi)容，更多關(guān)于vue-manage-system升級(jí)vue3的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論