main.ts
1.66 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
import router from './router'
import { setupStore, useAppStore } from './store'
import { setupI18n } from './locales'
import { setupDirectives } from './directives'
import Icon from '@/components/Icon/src/Icon.vue'
import DictTag from '@/components/DictTag/src/DictTag.vue'
import 'element-plus/dist/index.css'
import 'virtual:uno.css'
import '@/styles/index.scss'
// 路由守卫(必须在 store 安装之后引入)
import './permission'
const app = createApp(App)
setupStore(app)
setupI18n(app)
setupDirectives(app)
app.use(router)
// 全量注册 Element Plus:P0 优先保证「不因按需引入漏样式」而出现视觉问题。
// ⚠️ 只调用一次 app.use(ElementPlus, ...) —— 重复调用会用新 options 覆盖掉 locale。
const appStore = useAppStore()
app.use(ElementPlus, { locale: zhCn, size: appStore.size })
// 全量注册官方图标组件(模板里可直接 <el-icon><HomeFilled /></el-icon>)
Object.entries(ElementPlusIconsVue).forEach(([key, component]) => {
app.component(key, component)
})
// 全局通用图标组件:<Icon icon="ep:home-filled" />(把后端下发的图标名渲染成图标)
app.component('Icon', Icon)
// 全局字典标签组件:<DictTag dict-type="system_common_status" :value="row.status" />
// 多个系统管理页面的状态/类型列都要用,逐个 import 容易漏
app.component('DictTag', DictTag)
app.mount('#app')
// 移除首屏 loading
document.getElementById('app-loading')?.remove()