区别
- Element-ui适用于vue2
- Element-plus适用于vue3
Element-plus
全局引用
- 缺点：全部组件和样式都引入的，很多都没用上，所以造成了打包文件太大
- 下载
npm install element-plus - 引用
// 全局引用
import ElementPlus from 'element-plus'
// 引用所有样式
import 'element-plus/lib/theme-chalk/index.css'
// 使用
app.use(ElementPlus)
-
在其他组件里面不用注册就可以使用
局部引入
- 缺点：由于是按需引入，所以引入频繁
- 下载
npm install element-plus - 引用：
//导入组件
import { ElButton } from 'element-plus'
//导入基础样式
import 'element-plus/lib/theme-chalk/base.css'
//导入按钮的样式
import 'element-plus/lib/theme-chalk/el-button.css'
export default defineComponent({
name: 'App',
components: {
// 注册组件
ElButton
}
})
配置引入
- 只能引入插件的 css 文件，但是 base 样式和 icon 还需要手动引入
- 下载
npm install element-plus - 下载插件：
npm install babel-plugin-import -D - 配置
babel.config.js
module.exports = {
plugins: [
[
'import',
{
libraryName: 'element-plus',
customStyleName: (name) => {
return `element-plus/lib/theme-chalk/${name}.css`
}
}
]
],
presets: ['@vue/cli-plugin-babel/preset']
}
- 在main文件中全局导入base样式文件和按钮组件并注册
不抽离：
import 'element-plus/lib/theme-chalk/base.css'
import { ElButton } from 'element-plus'
//注册全局组件
app.component(ElButton.name, ElButton)
抽离：
新建文件：
import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
const components = [ElButton, ElForm, ElFormItem, ElInput]
export function registerApp(app: any) {
for (const component of components) {
app.component(component.name, component)
}
}
