06.增加ElementPlus组件库

安装如下包：


npm install element-plus --save
npm install @element-plus/icons-vue

修改main.ts为如下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23



import {createApp} from 'vue'
import '@/style.css'
import App from '@/App.vue'
import router from "@/router";

// 新增内容
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

// 新增内容
app.use(router).use(ElementPlus)

// 新增内容 全局注册图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.mount('#app')

在components目录下新增一个TestElementPlus.Vue文件，内容如下：

1
2
3
4
5
6
7
8



<template>
  <el-button type="primary">测试按钮</el-button>
  <el-icon class="is-loading">
    测试图标<Loading />
  </el-icon>
</template>

修改router/index.ts，新增如下内容：

1
2
3
4
5
6
7
8
9



import TestElementPlus from '@/components/TestElementPlus.vue'

{
    path: '/testElementPlus',
    name: 'TestElementPlus',
    component: TestElementPlus
}

启动程序，访问localhost:8080/testElementPlus测试element-plus配置是否成功。