开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第5天，点击查看活动详情
1. 安装使用
elementplus的安装有两种方式，使用包管理器和直接引入的方式。
1.1 安装
1.1.1 包管理器
包管理器有很多，随便选择一个即可，一般我们常用的就是npm。
npm install element-plus --save
如果是其他包管理器，也可以采用以下方式
// yarn
yarn add element-plus
// pnpm
pnpm install element-plus
1.1.2 直接引入
直接引入的话我们一般采用csdn引入的方式引入的。
<head>
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
</head>
1.2 使用
elementplus的使用分为两种：按需引入，手动引入和完整引入。
1.2.1 按需引入
按需引入需要安装两个插件，然后在vue.config页面中进行配置，配置完成之后即可在页面中使用。
安装插件
npm install -D unplugin-vue-component unplugin-auto-import
配置插件
配置插件需要根据你所使用的打包工具来区分
如果你使用的是webpack打包工具，那么就可以使用下列配置方式
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
如果你使用的是vite打包工具，那么就可以使用下列配置方式
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
从上述代码可以看出这两种方式的配置是差不多的。
1.2.2 手动引入
手动引入和按需引入有点类似，只是手动引入需要在页面中手动引入所需的组件，而按需引入是自动的，不需要手动引入，减少了人力成本，引入组件的这部分是根据插件来完成的。
首先要安装unplugin-element-plus来导入样式
npm install -D unplugin-element-plus
在页面中使用组件
<template>
<el-button>I am ElButton</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
components: { ElButton },
}
</script>
1.2.3 完整引入
完整引入很好理解就是将elementplus中的所有组件一次性全部使用，需要使用的时候就直接使用就好。
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')
这样做的缺点就是打包之后的体积非常大，如果你不在意这个那么可以尽管这样使用，但是还是建议使用按需引入的方式
上面介绍的三种使用方式主要是组件的使用方式，elementplus除了这些常用的组件之外，还有组件api和图标。下面开始介绍组件api和图标的使用。
2. 组件API的使用
这里的组件API指的是像Message, ElNotification这种，有两种使用方式：全局方法和单独引用
2.1 全局方法
全局方法$message被添加在了app.config.globalProperties。使用的时候直接从这个对象上取即可，不需要重新引入。
// app.vue
app.config.globalProperties.$message.warning('这是一条提示消息');
// .vue
const cns = getCurrentInstance();
const globObj = cns.appContext.config.globalProperties;
globObj.$message('这是一条提示消息');
2.2 单独引用
单独引用就是指在需要使用这类组件API的组件页面中引入。
import { ElMessage } from 'element-plus';
ElMessage.warning('这是一条提示消息');
3. 图标的使用
在elementplus中使用图标和elementui有很大的不同，在elementui中内置的是字体图标，组件都是一个i标签，设置不同的class即可得到对应的图标。而在elementplus中，内置的是SVG图标。
3.1 安装
要想使用图标，首先要安装
npm install @element-plus/icons-vue;
3.2 注册图标
图标类似于上面的组件，也是需要注册（引入）才能使用，也有三种方式： 全局注册，手动注册，自定义注册
3.2.1 全局注册
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
const app = createApp(App);
for(const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
手动注册
在需要使用图标的页面中, 手动引入图标
<el-icon><Plus /></el-icon>
import { Plus } from '@element-plus/icons-vue';
自定义注册
如何需要导入任何图标集，可以安装插件unplugin-icons和unplugin-auto-import来完成。
安装
npm i -D unplugin-icons
npm i -D @iconify/json // 手动安装图标库
配置
// vue.config.js
const Icons = require('unplugin-icons/webpack')
module.exports = {
configureWebpack: {
plugins: [
Icons({
compiler: 'vue3',
// 自动安装
autoInstall: true,
// 自定义图标加载
customCollections: {
// home图标集
// 给svg文件设置fill="currentColor"属性，使图标的颜色具有适应性
home: FileSystemIconLoader('src/assets/svg/home', svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')),
// about图标集
about: FileSystemIconLoader('src/assets/svg/about', svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')),
}
}),
],
}
}
