Vue 之 Element-ui 按需导入

前言

在使用 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>