Vue3.0+TS+Element-plus實作(若依版后臺管理系統)

附上專案地址: Vue3.0+TS+Element-plus 后臺管理系統模板

準備作業

安裝vue3.0，npm create vue3-project

選中這幾項即可，不需要vuex, 我們自己封裝狀態管理，

setup函式使用

在.vue檔案中, script 標簽下代碼都必須帶有lang=“ts”，關于setup函式呼叫時間是在vue2的create之前觸發，關于其他的生命周期相信大家都有所了解，這里就不做贅述了，setup有兩種寫法 ，

常規寫法

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'home',
  setup() {
    return {}
  }
})
</script>

需要在模板html中使用到的變數及方法名必須全部 return

簡捷寫法

<script lang='ts' setup>
import navbar from '@/components/Navbar'
</script>

無需 return 包括components，只要定義或引入后即可直接在html中使用，弊端是name無法定義，如果用到 name, 須：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'home',
})
</script>

<script lang='ts' setup>
import navbar from '@/components/Navbar'
// 此處撰寫業務代碼 .......
</script>

此兩種寫法本人在專案中都有用到，我認為最好的使用場景是 components組件中使用第一種，views頁面中使用第二種，原因是由于組件中會常用到props, emit，如此在第二種寫法中就不太方便了，必須

import { defineProps, defineEmits } from 'vue'

狀態管理Store

vue3.0是支持vuex的，而且vuex 是一個比較完善的狀態管理庫，它很簡單，并與 Vue 集成的非常好，不使用vuex的原因是vue3 版本重新撰寫了底層的回應式系統（reactive，ref)，并介紹了構建應用程式的新方法，新的回應式系統非常強大，它可以直接用于集中的狀態管理，既然自身已經具備這樣的功能，何必還要單獨安裝vuex舍近求遠呢，于是我自定義了一套store，用法我結合了es6的class，具體實作專案中查閱更詳細！

import { reactive, readonly } from 'vue'

export abstract class Store<T extends Object> {
  protected state: T

  constructor() {
    const data = this.data()
    this.setup(data)
    this.state = reactive(data) as T
  }

  public getState(): T {
    return readonly(this.state) as T
  }

  protected abstract data(): T

  protected setup(data: T): void { }
}

動態快取（keep-alive)

在vue2中

<transition name="fade-transform" mode="out-in">
  <keep-alive :include="cachedViews">
    <router-view class="app-container" :key="key" />
  </keep-alive>
</transition>

在vue3中

<router-view class="app-container" v-slot="{ Component, route }">
  <transition name="fade-transform" mode="out-in">
    <keep-alive :include="cachedViews" :max="10">
      <component :is="Component" :key="route.path" />
    </keep-alive>
  </transition>
</router-view>

Element Plus

全域漢化

在element-plus中, 默認是英文版的我們需要加一個漢化:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
// 注冊ElementPlus
app.use(ElementPlus, {
  locale, // 語言設定
  size: Cookies.get('size') || 'medium' // 尺寸設定
})

主題風格

// 主題顏色風格邏輯引入
import theme from '@/utils/theme'
import { getSetting } from '@/utils/setting'
// 主題顏色風格初始化
theme(getSetting('theme'))

關于 theme 以及 getSetting 方法, git中有詳細代碼, 這里只說明重要代碼

注意

關于選單介面資料格式以下為例

{
	children: [{
		alwaysShow: null
		children: []
		component: "systemManagement/menuManage"
		hidden: false
		meta: {title: "選單管理", icon: "", noCache: false}
		name: "menuManage"
		path: "menuManage"
		redirect: ""
	}]
	component: "Layout"
	hidden: false
	meta: { title: "系統管理", icon: "international", noCache: false }
	icon: "international"
	noCache: false
	title: "系統管理"
	name: "systemManagement"
	path: "/systemManagement"
	redirect: "noRedirect"
}

感謝閱讀~~
本篇文章及專案代碼參考vue2.0版若依系統，特此說明并致謝！
如果對您有所幫助，請點個star，謝謝！