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>

由于 vue3.2 版本的发布，<script setup 的实验性标志已经去掉，这说明这个语法提案已经正式开始使用，并且我个人对这个方案表示非常喜欢。无需 return 包括components，只要定义或引入后即可直接在html中使用，弊端是name无法定义，如果用到 name, 须：

<script lang='ts' name='home' setup>
import navbar from '@/components/Navbar'
// 此处编写业务代码 .......
</script>

但此种定义name方式无法通过keep-alive缓存页面数据。若要缓存数据，可以写两个script：

<script lang='ts'>
name: 'home'
</script>

<script lang='ts' setup>
import navbar from '@/components/Navbar'
// 此处编写业务代码 .......
</script>

状态管理Store

vue3.0是支持vuex的，而且vuex 是一个比较完善的状态管理库。它很简单，并与 Vue 集成的非常好。不使用vuex的原因是vue3 版本重新编写了底层的响应式系统（reactive，ref)，并介绍了构建应用程序的新方法。新的响应式系统非常强大，它可以直接用于集中的状态管理，既然自身已经具备这样的功能，何必还要单独安装vuex舍近求远呢。于是我自定义了一套store。用法结合了es6的class，具体实现在git中查阅更详细！

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 { }
}

pinia 是一个轻量简化的状态管理工具，也是不错的选择。

动态缓存（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中有详细代码, 这里只说明重要代码

注意

关于菜单接口数据格式以下为例

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

效果展示

在这里插入图片描述

感谢阅读~~ 本篇文章及项目代码参考vue2.0版若依系统，特此说明并致谢！如果对您有所帮助，请点个star，谢谢！