Vue3.0+TS+Element-plus — самая полная система управления фоном!

Прикрепите адрес исходного кода:Шаблон системы фонового управления Vue3.0+TS+Element-plus

Готов к работе

Установите vue3.0, npm создайте vue3-проект 在这里插入图片描述 Просто выберите эти элементы, Vuex не нужен, мы сами инкапсулируем управление состоянием.

использование функции настройки

В файле .vue код под тегом script должен иметь lang="ts". Что касается времени вызова функции настройки, то она запускается перед созданием vue 2. Я думаю, все знают о других жизненных циклах, поэтому я не буду здесь вдаваться в подробности. setup имеет два способа записи,

обычное письмо

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

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

Имена переменных и методов, которые необходимо использовать в HTML-шаблоне, должны возвращать

стенография

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

В связи с выпуском vue3.2 был удален экспериментальный флаг

import { defineProps, defineEmits } from 'vue'

Магазин управления состоянием

Vue3.0 поддерживает vuex, а vuex — относительно полная библиотека управления состоянием. Это просто и очень хорошо интегрируется с Vue. Причина отказа от использования vuex заключается в том, что версия vue3 переписывает базовую реактивную систему (reactive, ref) и вводит новые способы создания приложений. Новая адаптивная система очень мощная, ее можно использовать напрямую для централизованного управления состоянием, раз она уже имеет такую функцию, то зачем устанавливать vuex отдельно. Поэтому я настроил набор магазина. Использование сочетается с классом es6, пожалуйста, обратитесь к конкретному проекту реализации для более подробной информации!

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: Cookies.get('size') || 'medium' // 尺寸设置
})

стиль темы

// 主题颜色风格逻辑引入
import theme from '@/utils/theme'
import { getSetting } from '@/utils/setting'
// 主题颜色风格初始化
theme(getSetting('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"
}

Показать результаты

在这里插入图片描述

Спасибо за чтение~~ Эта статья и код проекта относятся к версии vue2.0 системы Ruoyi, настоящим объясняем и благодарим вас! Если это поможет вам, пожалуйста, нажмите звездочку, спасибо!