学习vue3 第四章

1.vue3安装element-plus 

 npm install element-plus --save

2.在vue3的main.ts

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3.安装icon图标

npm install @element-plus/icons-vue

 

4.main.te 引入 import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// main.ts

import { createApp } from 'vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import App from './App.vue'

// 引入icons图标

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

  app.component(key, component)

}

 

app.use(ElementPlus)

app.mount('#app')

 

5.在top.vue页面放入：

        <el-icon color="#409EFC" class="no-inherit">

                <HomeFilled />

         </el-icon>  

 6.运行结果：首页+icon图标