Attached source code address:Vue3.0+TS+ Element-Plus Background management system template

The preparatory work

Install VUe3.0, NPM create vue3-projectJust select these items, we don’t need VUEX, we encapsulate our own state management.

The setup function uses

In.vue files, all code under the script tag must have lang=”ts”. The setup call is triggered before vue2’s create, and the rest of the life cycle is familiar, so I won’t go into details here. Setup is written in two ways,

Regular writing

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'home'.setup() {
    return {}
  }
})
</script>
Copy the code

All variables and method names that need to be used in template HTML must return

Simple writing

<script lang='ts' setup>
import navbar from '@/components/Navbar'
</script>
Copy the code

With the release of vue3.2, the <script setup experimental flag has been removed, indicating that the syntax proposal is now in use, and I personally like it very much. If you want to return a component, you can use it directly in HTML as long as it is defined or introduced.

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'home',
})
</script>

<script lang='ts' setup>
import navbar from '@/components/Navbar'
// Write the business code here.......
</script>
Copy the code

I have used both methods in my projects, and I think the best scenario is to use the first method in components and the second method in views. The reason for this is that the component is often used for props, emit, which is not convenient in the second version

import { defineProps, defineEmits } from 'vue'
Copy the code

Status Management Store

Vue3.0 supports Vuex, and Vuex is a fairly complete state management library. It is simple and integrates well with Vue. The reason for not using VUex is that the VUE3 version rewrites the underlying reactive system (Reactive, REF) and introduces new ways to build applications. The new responsive system is so powerful that it can be used directly for centralized state management, so why install Vuex when you already have this capability? So I customized a set of stores. Usage combined with es6 class, the specific implementation of the project to see more details!

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{}}Copy the code

Keep-alive

In vue2

<transition name="fade-transform" mode="out-in">
  <keep-alive :include="cachedViews">
    <router-view class="app-container" :key="key" />
  </keep-alive>
</transition>
Copy the code

In 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>
Copy the code

Element Plus

Global localization

In Element-Plus, the default is English and we need to add a Chinese version:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
/ / register ElementPlus
app.use(ElementPlus, {
  locale, // Language Settings
  size: Cookies.get('size') | |'medium' // Set the size
})
Copy the code

theme

// Theme color style logic is introduced
import theme from '@/utils/theme'
import { getSetting } from '@/utils/setting'
// The theme color style is initialized
theme(getSetting('theme'))
Copy the code

Git has detailed code for the theme and getSetting methods, but only the important ones are described here

Pay attention to

The following is an example of menu interface data format

{
	children: [{
		alwaysShow: null
		children: []
		component: "systemManagement/menuManage"
		hidden: false
		meta: {title: "Menu Management".icon: "".noCache: false}
		name: "menuManage"
		path: "menuManage"
		redirect: ""
	}]
	component: "Layout"
	hidden: false
	meta: { title: "System Management".icon: "international".noCache: false }
	icon: "international"
	noCache: false
	title: "System Management"
	name: "systemManagement"
	path: "/systemManagement"
	redirect: "noRedirect"
}
Copy the code

Results show

Thanks for reading ~~ This article and project code refer to vue2.0 version of The system, hereby explain and thank you! If I can help you, please click star, thank you!