Vite2 + vue3 + TS + ElementPlus 从零搭建后台管理系统（三）

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>

复制代码

最后

到目前为止，完善了后台管理系统前期的所有基础内容，因为篇幅太长，所有下一张开始完善基础布局。

期待你的点赞哦。😄😄😄