一、介绍
官网地址:https://element-plus.gitee.io/zh-CN/
基于Vue3的一套桌面组件库和字体图标,可以直接引用。
二、安装Element-Plus
cnpm install element-plus --save
三、引用方式
如果对打包后的文件大小无所谓,就可以使用完整导入更方便
在main.js中导入
import { ElementPlus } from "element-plus"
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
这个才是我们常用的方法
- 首先,需要安装两个插件
cnpm install -D unplugin-vue-compoents unplugin-auto-import
- 然后修改vue.config.js配置文件
可以直接粘贴过去就好
const { defineConfig } = require('@vue/cliservice')
const AutoImport = require('unplugin-autoimport/webpack')
const Components = require('unplugin-vuecomponents/webpack')
const { ElementPlusResolver } =
require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
}
})
四、使用组件
去官网中复制源码,粘贴到对应位置就好
关于字体图标
一、安装icons字体图标
cnpm install @element-plus/icons-vue
二、按需导入
同上文
三、全局注册
在src/plugins.icons.js 粘贴代码
import * as components from "@elementplus/icons-vue";
export default {
install: (app) => {
for (const key in components) {
const componentConfig =
components[key];
app.component(componentConfig.name,
componentConfig);
}
},
};
四、引入文件
在main.js中引入icon.js文件
import elementIcon from "./plugins/icons;
app.use(elementIcon)
五、使用方式
需要什么粘贴就好