vue按需加载组件

Vue按需加载组件

#1 环境

"vue": "^2.5.2",
"element-ui": "^2.12.0",
"view-design": "^4.0.0",

#2 需求

在完整导入iView组件之后,iView不能满足需求,需要导入element组件,但是完成导入可能会导致文件过大,这时,需要按需求引入ele组件

#3 开始

#3.1 安装

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的

npm install babel-plugin-component -D

#3.2 修改.babelrc文件

.babelrc

{
    "presets": [
        [
            "env", {
                "modules": false,
                "targets": {
                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
                }
            }
        ],
        "stage-2"
    ],
    "plugins": [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]
}

#3.3 引入

1. 新建element 文件夹

在 src 文件夹中新建我们的 other_ui/element 文件夹，并在里面新建一个 index.js 文件

目的是为了更好的管理element组件

2. 在index文件中去书写我们需要引入的部分组件

// 导入自己需要的组件
import { Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col } from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(OptionGroup)
    Vue.use(Input)
    Vue.use(Tree)
    Vue.use(Dialog)
    Vue.use(Row)
    Vue.use(Col)
  }
}
export default element

注意: 这里要使用 Select 组件，必须同时使用 Option 和 OptionGroup
这里的 install 方法表示在 main.js 中，如果使用 Vue.use() 方法的话，则该方法默认会调用 install 方法

3. 在 main.js 中使用该文件，就大功告成了

// 按需加载element组件
import 'element-ui/lib/theme-chalk/index.css'
import element from './other_ui/element/index'
Vue.use(element);

#4 测试

iView组件和element组件同时使用效果:

---

---