vue3引入ElementPlus组件

一、前言

软件：VS code，框架：vue3，组件：ElementPlus

vue2使用的是element-ui，ElementPlus是基于vue3的组件库

还有不同的是语言vue2使用的是js，vue3使用的是ts

二、安装

进入官网(element-plus-docs.bklab.cn/zh-CN/guide…) 在你的项目中的终端中输入下面命令

npm install element-plus --save

三、引入组件（main.ts）

在main.ts中引入

//引入vue
import { createApp } from 'vue' 

// 引入element js
import ElementPlus from 'element-plus'
// 引入element css
import 'element-plus/dist/index.css'

// 引入最大的组件
import App from './App.vue'
const app = createApp(App) 

// 将element plus放到vue中使用，******注意一定是先引入语言包然再去使用********
app.use(ElementPlus) 

//将vue挂载到页面
app.mount('#app')

四、引入语言包（默认的是英文）

// 引入中文语言包，默认是英语，将elementPlus里面无法修改的英文变成中文简写
import zhCn from 'element-plus/es/locale/lang/zh-cn' 
app.use(ElementPlus, {
  locale: zhCn,
})

五、图标的使用

1 安装

在你的项目中的终端中输入下面命令

npm install @element-plus/icons-vue

2 注册所有的图标

在main.js中

// 引入elementPlus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

3 使用

在官网中直接单击即可复制

<template>
  <div>、
  
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    
    <!-- 或者独立使用它，不从父级获取属性 -->
    <Edit />
    
  </div>
</template>

六、结合在一起的main.js代码

// 引入vue
import { createApp } from 'vue'
// 映入最大的组件
import App from './App.vue'
// 引入路由文件
import router from './router'
// 引入vuex
import store from './store'
const app = createApp(App)


// ---------引入element plus开始 ----------

// 引入element js
import ElementPlus from 'element-plus'
// 引入element css
import 'element-plus/dist/index.css'

// 引入中文语言包，默认是英语，将elementPlus里面无法修改的英文变成中文简写
import zhCn from 'element-plus/es/locale/lang/zh-cn' 
app.use(ElementPlus, {
  locale: zhCn,
})

// 引入elementPlus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}


// 将element plus放到vue中使用，******注意一定是先引入语言包然再去使用********
app.use(ElementPlus)

// ---------引入element plus结束-----------


// 使用vuex
app.use(store)
// 使用路由
app.use(router)
//将vue挂载到页面
app.mount('#app')
// createApp(App).use(store).use(router).mount('#app')