前言
在使用 Vue 开发项目中,我们一般会选择 Elment-ui ,因为这个库是基于 Vue 并且有很多现成的组件供我们使用。我们可以根据官方文档直接在 main.js 中引入,但是这样在最后项目开发完成后打包体积过大,建议是按需导入,因为有些组件我们是用不到的。
按需导入
1. 安装babel-plugin-component
插件
yarn add babel-plugin-component -D
- -D:是 -save 的简写,自动把模块和版本号添加到dependencies。(生产环境依赖)
- -S:是 --save-dev 自动把模块和版本号添加到devdependencies。 (开发环境依赖)
2. babel.config.js 配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3. 创建 element 文件
在
src
目录下创建一个名为element
的文件夹,element
文件夹下创建一个index.js
文件。
// src/element/index.js
import {
Button, Input, Card } from 'element-ui'
const element = {
install: function (Vue) {
Vue.use(Button)
Vue.use(Card)
}
}
Vue.prototype.$message = message;
export default element
4. main.js配置
import 'element-ui/lib/theme-chalk/index.css'; // 引入 element 样式
import element from './element/index.js'
Vue.use(element)
5. 使用 element 组件
在我们创建的
.vue
文件中直接使用在src/element/index.js
导入的组件
// src/view/login/index.vue
<template>
<Button />
</template>