Vite2 + VUe3 + TS + ElementPlus Build background Management System from scratch (3)

In the last chapter, the state management tool Vuex4, vuUe-Router4, Axios and UI library used by Element- Plus Vite2 + Vue3 + TS + ElementPlus were added to build the background management system from zero (II).

This chapter mainly improves the background management system basic layout and project structure

1. Create a project directory

Create a new layout directory under SRC:

Layout /index.vue // layout entry file
Layout /main // Layout component folder
Layout/Component/Logo // Icon Component folder
Layout/Component /navMenu // Navigate components folder
Layout/component/value. Vue / / sidebar components
Layout/component/mainView. Vue / / entrance layout file
views/home/index.vue

Create a new file under SRC /store:

Interface /index.ts // store declaration file
modules/app.ts
modules/themeConfig.ts

Create a new global style file under SRC /styles:

app.scss
element.scss
index.scss
transition.scss
var.scss
mixins/element-mixins.scss
mixins/function.scss

The directory structure is as follows:

2. Improve store content

Store/interface/index. Ts:

// Interface type declaration

export interface App {
	count: 0;
}

// Layout configuration
export interface ThemeConfigState {
	globalTitle:string;
}

// Main interface (top-level type declaration)
export interface RootStateTypes {
	themeConfig: ThemeConfigState;
  app:App;
}
Copy the code

Store/modules/themeConfig. Ts:

import { Module } from 'vuex';
import { ThemeConfigState, RootStateTypes } from '.. /interface/index';

const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
	namespaced: true.state: {
		/* --------- Interface Settings --------- */
		// Main title of website (menu navigation, current page title of browser)
		globalTitle: 'Vue3-ElementPlus-Vite2',},mutations: {
		// Set the layout configuration
		getThemeConfig(state: any, data: object){ state.themeConfig = data; }},actions: {
		// Set the layout configuration
		setThemeConfig({ commit }, data: object) {
			commit('getThemeConfig', data); ,}}};export default themeConfigModule;

Copy the code

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 Provides the type when the store is installed into the Vue application, which is passed to the useStore method
// Define the injection type
const key: InjectionKey<Store<RootStateTypes>> = Symbol(a)const store = createStore<RootStateTypes>({
  modules:{
    themeConfig,
    app
  }
})

// Injecting the type into useStore seems to be invalid
export function useStore() {
  return baseUseStore(key)
}

export function setupStore(app: App<Element>) :void {
  app.use(store, key)
}

export default store
Copy the code

3. Complete the contents of the styles directory

Because the style file content is too much, please help yourself here.

4. Improve home content

App. Vue:

<template>
  <router-view></router-view>
</template>

<script lang="ts">
  export default {
    name: 'App',}</script>

<style></style>

Copy the code

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>

Copy the code

Modifying a route in 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'),}]}]})...Copy the code

5. Improve the basic content of layout

Layout/main/index. Vue:

< the template > < el - container class = "layout - the container" > < div > < div > {{getThemeConfig. GlobalTitle}} < / div > < div > sidebar < / 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() // Get layout configuration information const getThemeConfig = computed(() => {return store.state.themeconfig})  return { getThemeConfig } } } </script>Copy the code

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>

Copy the code

The last

So far, all the basic content of the background management system has been improved. Because the space is too long, the basic layout of the next page has been improved.

Looking forward to your likes. 😄 😄 😄

Vite2 + VUe3 + TS + ElementPlus Build background Management System from scratch (3)