前言
element-ui是由“饿了吗”团队开发的一个基于Vue框架的组件库,它提供了很多方便的api接口,可以快速的开发通用的页面。
呸,讲这些没用的东西干嘛
下面我们就简单的讲讲,怎么快速的上手使用。
ps:由于现在vue3已经成为新版本趋势,这里只介绍对应于vue3的element-plus安装
安装
安装的指令很简单,这里我以常用的npm包管理器来作为示例:
npm install element-plus --save
官网也提供了直接使用cdn引入的方法,这里不多作介绍。
导入
element-ui是分模块设计的,因此我们也需要导入使用的模块。
三种导入方式分别为全部导入、按需导入和手动导入。
全部导入虽然方便,但打包的体积将会十分巨大。
手动导入需要每次根据使用的模块进行导入,过于繁琐。
个人推荐的导入方式是按需导入(同时也是官方推荐),因此只介绍按需导入的方式。
按需导入
首先需要下载两个插件,分别是 unplugin-vue-components 和 unplugin-auto-import这两款插件。
npm install -D unplugin-vue-components unplugin-auto-import
导入之后我们还需要对打包工具进行配置,它的工作原理是自动检查我们用到的模块,并将其 ‘import语句’ 添加我们的组件中。
vite配置
这里以vue3的官方工具vite为例:
可将vite.config.js内容配置如下:
import { fileURLToPath, URL } from 'node:url'
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'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
webpack配置
如果你使用的是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()],
}),
],
}
结语
这样一来,按需导入的步骤就完成啦,你可以在vue组件中任意的使用element-ui的元素,并且不用考虑导入的问题。