(笔记整理)vue项目mint-ui组件按需引入(12)

https://www.jianshu.com/p/efb58263af7a

vue项目mint-ui组件按需引入

    大家有时候会用到mint-ui框架,但是有时候只需要一部分,全部引入又太占资源,所以按需引入组件的mint-ui就非常人性化。

1.官方文档的注意事项

    按照 Mint-ui 的官方文档,首先 npm install mint-ui -S ,这没什么好说的,安装完之后就是在项目中引入了,按照官方的说法,有全部引入和按需引入二种方式。作为实际项目开发来说,当然应该选择按需引入的方式,这可以减小我们项目的体积,加快加载速度。 

    官方方式(babel-plugin-component的下载安装npm install babel-plugin-component -D)。

    但是按照官方的方法,我们修改完成后并不能愉快的玩耍,

    注意:第一:不要覆盖.bebelrc里面的代码,这样是有问题的。第二:如果按照官方方法的话我们还需要安装npm install babel-preset-es2015 不然无法执行,解决方法请看第二步

(笔记整理)vue项目mint-ui组件按需引入(12)

(笔记整理)vue项目mint-ui组件按需引入(12)

(笔记整理)vue项目mint-ui组件按需引入(12)

2..babelrc文件的修改

    项目当中我们并不需要下载安装babel-preset-es2015,这是多余的,因为es2015已经被"env"代替了,可能mint-ui官方文档没有及时更新,我们只需做如下更改,就可以愉快的玩耍了

(笔记整理)vue项目mint-ui组件按需引入(12)

在main.js里就可以按需引入了
(笔记整理)vue项目mint-ui组件按需引入(12)

希望可以帮助大家

2019-07-13