前言

近期抽了點時間，對 vue-manage-system 這個項目進行了升級，從 vue2 升級到 vue3、 elementplus、vite、pinia、typescript。這也是對此次升級做了一些細節(jié)方面的總結(jié)吧。

按需導(dǎo)入

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

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

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

組件的 name 選項

在項目中通過 <KeepAlive> 內(nèi)置組件的 include prop 來緩存組件實例，它會根據(jù)組件的 name 選項進行匹配，因此必須顯式聲明一個 name 選項。在 vue2 中使用選項式api開發(fā)時可以很簡單的設(shè)置 name 選項，在 vue3 中使用組合式api，便不能同選項式api一樣了。在 3.2.34 或以上的版本中，使用 <script setup> 的單文件組件會自動根據(jù)文件名生成對應(yīng)的 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，它也是一個跨組件/頁面共享狀態(tài)的存儲庫，與 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)限管理

在項目中，不同的角色對應(yīng)不同的權(quán)限，低權(quán)限的角色，無法進入高權(quán)限的頁面，通過vue自定義指令來實現(xiàn)入口的隱藏。 使用pinia來管理當前用戶的權(quán)限，并在頁面刷新時從本地存儲中獲得，以免刷新后數(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ù)用戶角色來獲取對應(yīng)權(quán)限（此處為本地示例項目，權(quán)限未從服務(wù)器獲取）

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

在自定義指令中，對不在權(quán)限中的節(jié)點進行隱藏，在CSS中設(shè)置帶hidden屬性的display為none即可簡單實現(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" 即可實現(xiàn)不同權(quán)限的顯示與隱藏。

Typescript

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

總結(jié)

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

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

最新評論