Vite2 + vue3 + TS + ElementPlus 从零搭建后台管理系统(三)
上一章主要添加了 Vue3 的状态管理工具Vuex4,路由Vue-router4,Axios以及使用的UI库 Element-plus Vite2 + vue3 + TS + ElementPlus 从零搭建后台管理系统(二)
这一章主要完善后台管理系统基础布局和项目结构
1. 新建所需项目目录
在src 下新建布局目录:
-
layout/index.vue // layout 入口文件
-
layout/main // 布局组件 文件夹
-
layout/component/logo // 图标组件 文件夹
-
layout/component/navMenu // 导航组件 文件夹
-
layout/component/aside.vue // 侧边栏组件
-
layout/component/mainView.vue // 布局入口文件
-
views/home/index.vue
在src/store 下新建:
- interface/index.ts // store声明文件
- modules/app.ts
- modules/themeConfig.ts
在src/styles 下新建全局样式文件:
- app.scss
- element.scss
- index.scss
- transition.scss
- var.scss
- mixins/element-mixins.scss
- mixins/function.scss
目录结构如下:
2. 完善 store 内容
store/interface/index.ts:
// 接口类型声明
export interface App {
count: 0;
}
// 布局配置
export interface ThemeConfigState {
globalTitle:string;
}
// 主接口(顶级类型声明)
export interface RootStateTypes {
themeConfig: ThemeConfigState;
app:App;
}
store/modules/themeConfig.ts:
import { Module } from 'vuex';
import { ThemeConfigState, RootStateTypes } from '../interface/index';
const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
namespaced: true,
state: {
/* --------- 界面设置 --------- */
// 网站主标题(菜单导航、浏览器当前网页标题)
globalTitle: 'Vue3-ElementPlus-Vite2',
},
mutations: {
// 设置布局配置
getThemeConfig(state: any, data: object) {
state.themeConfig = data;
},
},
actions: {
// 设置布局配置
setThemeConfig({ commit }, data: object) {
commit('getThemeConfig', data);
},
},
};
export default themeConfigModule;
store/index.ts:
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
import type { App } from 'vue'
import { RootStateTypes } from './interface/index';
import themeConfig from './modules/themeConfig';
import app from './modules/app';
// InjectionKey 将store安装到Vue应用程序时提供类型,将类型传递InjectionKey给useStore方法
// 定义注入类型
const key: InjectionKey<Store<RootStateTypes>> = Symbol()
const store = createStore<RootStateTypes>({
modules:{
themeConfig,
app
}
})
// 将类型注入useStore,似乎无效
export function useStore() {
return baseUseStore(key)
}
export function setupStore(app: App<Element>): void {
app.use(store, key)
}
export default store
3. 完善 styles目录内容
由于样式文件内容太多,劳烦这里自取。
4. 完善 home 内容
App.vue:
<template>
<router-view></router-view>
</template>
<script lang="ts">
export default {
name: 'App',
}
</script>
<style></style>
views/home/index.vue:
<template>
<div>
<HelloWorld></HelloWorld>
<el-button @click="addCount">count is: {{ count }}</el-button>
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from 'store/index'
import HelloWorld from '@/components/HelloWorld.vue'
export default defineComponent({
name: 'App',
components: {
HelloWorld
},
setup() {
const store = useStore()
const count: any = computed({
get() {
return store.state.app.count
},
set(value) {
store.commit('increment', value)
}
})
function addCount() {
count.value += 1
}
return {
count,
addCount
}
}
})
</script>
<style></style>
在 router/index.ts 中修改路由:
...
const Layout = () => import('@/layout/index.vue')
...
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
component: Layout,
children: [
{
path: '/home',
component: ()=>import('views/home/index.vue'),
}
]
}
]
})
...
5. 完善 layout 基础内容
layout/main/index.vue:
<template>
<el-container class="layout-container">
<div>
<div>{{ getThemeConfig.globalTitle }}</div>
<div>侧边栏</div>
</div>
</el-container>
</template>
<script lang="ts">
import { computed } from 'vue'
import { useStore } from 'store/index'
export default {
name: 'layoutDefaults',
setup() {
const store = useStore()
// 获取布局配置信息
const getThemeConfig = computed(() => {
return store.state.themeConfig
})
return {
getThemeConfig
}
}
}
</script>
layout/index.vue:
<template>
<div class="app-wrapper">
<component :is="layout" />
</div>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import Defaults from './main/index.vue'
export default defineComponent({
name: 'Layout',
components: {
Defaults
},
setup() {
const layout = ref<string>('Defaults')
return {
layout
}
}
})
</script>
<style lang="scss" scoped>
.app-wrapper {
position: relative;
height: 100%;
width: 100%;
}
</style>
最后
到目前为止,完善了后台管理系统前期的所有基础内容,因为篇幅太长,所有下一张开始完善基础布局。
期待你的点赞哦。😄😄😄