vue按需加载组件

Autooooooo

发布于 2020-11-09 10:16:08

1.3K0

发布于 2020-11-09 10:16:08

文章被收录于专栏：Coxhuang

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 引入

新建element 文件夹

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

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

在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 方法

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

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

#4 测试

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/11/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

vue.js

babel.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

vue.js

babel.js

登录后参与评论

0 条评论

热度

vue按需加载组件

vue按需加载组件

Vue按需加载组件

#1 环境

#2 需求

#3 开始

#3.1 安装

#3.2 修改.babelrc文件

#3.3 引入

#4 测试

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐