Appearance
vue3.0 全局属性挂载（element api）
1.element-plus 组件 api 挂载到 app
添加文件 src/plugins/element.ts
src/plugins/element.ts 代码内容：
typescript
import { App } from 'vue'
import {
ElButton,
ElMessage,
ElNotification,
ElMessageBox
} from 'element-plus'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// Element Plus 组件内部默认使用英语
// https://element-plus.gitee.io/zh-CN/guide/i18n.html
// import zhCn from 'element-plus/es/locale/lang/zh-cn'
// Element Plus 直接使用了 Day.js 项目的时间日期国际化设置, 并且会自动全局设置已经导入的 Day.js 国际化配置。
import 'dayjs/locale/zh-cn'
// $ELEMENT size属性类型
export type Size = 'default' | 'medium' | 'small' | 'mini'
export default (app: App): void => {
// 全局导入
// app.use(ElementPlus, {
// locale: zhCn
// })
// 按需导入组件列表
const components = [
ElButton,
ElMessage,
ElNotification,
ElMessageBox
]
components.forEach(component => {
app.use(component)
})
// Vue.prototype 替换为 config.globalProperties
// 文档说明 https://v3.cn.vuejs.org/guide/migration/global-api.html#vue-prototype-%E6%9B%BF%E6%8D%A2%E4%B8%BA-config-globalproperties
app.config.globalProperties.$message = ElMessage
app.config.globalProperties.$notify = ElNotification
app.config.globalProperties.$confirm = ElMessageBox.confirm
app.config.globalProperties.$alert = ElMessageBox.alert
app.config.globalProperties.$prompt = ElMessageBox.prompt
// element-plus全局配置
// 说明文档：https://element-plus.gitee.io/#/zh-CN/component/quickstart#quan-ju-pei-zhi
// 该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸 small，zIndex 设置弹框的初始 z-index（默认值：2000）。
app.config.globalProperties.$ELEMENT = {
size: 'medium',
// zIndex: 2000 弹框zIndex默认值：2000
}
}
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
49
50
51
52
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
49
50
51
52
安装 dayjs npm install dayjs
element plus 按需导入时国际化配置
官方文档国际化配置参考：https://element-plus.gitee.io/zh-CN/guide/i18n.html#configprovider
typescript
<template>
<div id="app">
<el-config-provider :locale="locale">
<router-view />
</el-config-provider>
</div>
</template>
<script>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
export default {
name: 'App',
components: {
ElConfigProvider,
},
setup() {
return {
locale: zhCn,
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2. 类型声明问题
src/main.ts
typescript
import { createApp } from 'vue'
import router from './router/index';
import store from './store'
import App from './App.vue'
import 'normalize.css/normalize.css'
import '@/styles/index.scss'
import 'virtual:svg-icons-register'
import initSvgIcon from '@/icons/index'
// element-plus
import installElementPlus from './plugins/element'
createApp(App)
.use(store)
.use(installElementPlus)
.use(initSvgIcon)
.use(router)
.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
安装 @vue/runtime-core
shell
npm install @vue/runtime-core
1
创建自定义声明文件 src/runtime.d.ts
typescript
// 挂载到vue实例上
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus'
import { Size } from './plugins/element'
// vue实例上挂载属性类型声明
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$message: typeof ElMessage;
$notify: typeof ElNotification;
$confirm: typeof ElMessageBox.confirm;
$alert: typeof ElMessageBox.alert;
$prompt: typeof ElMessageBox.prompt;
$ELEMENT: {
size:Size
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
*** 自定义类型声明不能放在 env.d.ts 里，会导致。vue 文件不能识别。***
注意：如果是 vscode 编辑器 将 Vetur 插件禁掉，该插件即使配置了声明文件 依然会提示类型不存在。vscode 自己的 ts 检测提示是可以检测到声明的属性挂载
创建自定义声明文件 src/runtime.d.ts 。 这里注意是 src 目录下创建的，项目里 tsconfig.json 中 include 选项配置包含的 ts 文件指定的都是 src 目录下的。你也可以根据自己情况，在 tsconfig.json 中 include 选项里单独配置这个声明文件的路径。
使用 pnpm 的同学注意
此时重新打开编辑器你会发现 类型声明还是不可以，那是因为 pnpm 安装依赖时 node_modules 里并没有平级的 @vue/runtime-core 这个包，npm 是不会有这个问题的。
解决办法： 项目根目录下创建。npmrc 文件，添加如下配置
typescript
shamefully-hoist = true
1
然后 重新安装依赖：
bash
pnpm install
1
此时，你会发现 node_modules 里 @vue/*相关的包就都有了
3. 组件中使用
src/views/dashborad/index.vue
当敲写 proxy.$ 时 挂载类型成功提示出来了
vue
<template>
<div>
<h1>Dashboard page</h1>
<svg-icon icon-class="bug"></svg-icon>
<!-- icon-class svg图标名称 class-name 额外的自定义类名 @click绑定事件 -->
<svg-icon icon-class="404" class-name="custom-class" @click="sayHi"></svg-icon>
</div>
</template>
<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()!
const sayHi = () => {
proxy?.$message.success('恭喜你，这是一条成功消息')
}
</script>
<style lang="scss">
.custom-class { // 自定义样式404
font-size: 200px;
color: green;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
点击 404 图标 效果图
eslintrc.js
rules 关闭了一条规则
javascript
{
"rules": {
"no-unused-expressions": "off"
}
}
1
2
3
4
5
2
3
4
5
本节源码参考
https://gitee.com/zhufengpeixun/vue3-admin2
对于每节文章有问题需要补充评论的 大家可以写在每节下方评论处 感谢