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">
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: ('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"vue element admin
}
效果展⽰
感谢阅读~~
本篇⽂章及项⽬代码参考vue2.0版若依系统，特此说明并致谢！如果对您有所帮助，请点个star，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。