vlambda博客
学习文章列表

组件的全部引入和按需引入的差别及优劣不再过多赘述，直入主题讲一下iview3.x组件的按需引入。

1. 全局安装vue-cli    

      cnpm i -g @vue/cli

2. 通过vue-cli创建基于webpack的项目

       vue init webpack projectName

3. 项目创建完成后，进入项目目录，安装iview，注意无论是全部引入，还是按需引入，都需要首先安装iview

       cnpm i iview --save

4. iview 的样式文件是基于less语法，如果有自定义样式的需求可以安装less，安装less的同时要安装less-loader。安装less与less-loader的时候要注意版本问题，如果不指定版本默认会安装最新版本，这样会造成与webpack的不兼容很多时候，less与less-loader并不需要安装太高版本，如果一味追求最新版本，很可能会造成兼容性问题，经过我的多次实践，我认为less2.3.1搭配less-loader5.0.0是目前来说相对稳定的组合，至少在我做过的项目中没有出现过兼容性问题

       cnpm i [email protected] --save

    cnpm i [email protected] --save

    

5. 全部引入在此就不说了，在此只说一下按需引入。借助babel-plugin-component插件，可以很方便的只引入需要的组件，首先需要安装该组件

       cnpm install babel-plugin-import --save-dev

6. 插件安装好之后，按照官网提示，将.babelrc文件修改为如下样式

{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": [["import", { "libraryName": "iview", "libraryDirectory": "src/components" }]]}

注意1：按需引入，就不要在main.js中写import iView from'iview';否则仍然会是将组件全部引入

注意2：即使是按需引入，也需要引入iview的样式文件，即需要在main.js中写入如下语句：import 'iview/dist/styles/iview.css';

完成上面的配置后，就可以在需要用到iview组件的地方通过下面的方式来进行组件的引入了：

// 示例import { Button, Table } from 'iview';Vue.component('Button', Button);Vue.component('Table', Table);

但是这样的话并不便于管理，也不够优雅，因此可以通过下面的方式来优雅地完成组件的按需引入和自定义主题

二、优雅地完成组件的按需引入

1. 首先，可以在src目录下新建一个目录，专门用来引入iview组件，我个人比较喜欢见名知意的命名方式，如图，我给这个目录起名为 iview

   
   

2. 之后，在iview目录下新建iview.js文件和theme.less文件，iview.js文件可以随意命名，同样，theme.less文件也可以随意命名，如图：

   

3. 在iview.js文件中引入需要的组件，如图：

   
   

   

4. 之后在main.js中引入该文件即可，如图：

   

至此，iview3.x组件的按需引入完成，再有需要使用的组件只需要在iview.js中引入并注册组件就可以全局使用了。

附：iview提供了LoadingBar来进行进度的提示，注意：LoadingBar只会在全局创建一个官方已经在文档中强调过了，LoadingBar的提示只是模拟进度，不过这在一定程度上可以提升交互体验，LoadingBar是用在路由中的，接下来说一下LoadingBar的使用：

1. 首先在路由中引入iView，import iView from 'iview   ，例如：我的路由是在router目录内的index.js中定义的，那么我就需要在index.jx中引入该语句，另外附上多次点击同一路由console报错的解决方案，如图：

   

   注意：这时引入的iView并不是全局引入了iview组件，详情可以看文章最后的打包结果对比

2. 之后在路由的前置守卫和后置守卫设置如下：

   router.beforeEach((to, from, next) => { iView.LoadingBar.start(); next();});
   router.afterEach(route => { iView.LoadingBar.finish();});
   

3. 我的完整的路由如图：
   

   

4. 之后，在main.js中导入该router，在进行路由跳转时，页面顶端便会出现提示进度的LoadingBar了。

   
   

回到src目录下的iview目录中，在第二步中新建的theme.less文件中，

1. 首先引入iview的样式

   @import '~iview/src/styles/index.less';

2. 之后修改iview的默认主题，如，我要将iview默认的主题色蓝色修改为 #3c6ef6：@primary-color: #3c6ef6

如图所示：

完整的变量列表可以到这里查看：https://github.com/iview/iview/blob/2.0/src/styles/custom.less

    3.在main.js中引入该文件即可，如图：

经过测试发现，这个时候，可以删除 import 'iview/dist/styles/iview.css' 语句了，并不会对组件的样式造成影响，这是因为已经在theme.less中引入了相关样式了。

至此，iview的按需引入和自定义主题已经全部完成，附上一些小优化技巧：

1. 若是不想每次npm run dev 后手动打开浏览器输入localhost:8080，可以将config目录下的index.js文件中的 autoOpenBrowser的值改为true，前提是你的电脑设置好了默认浏览器，即：

           autoOpenBrowser: true

2. 关闭productionSourceMap也能大幅减小打包后的体积，如果没有动过config目录下的index.js文件，改行应该在第52行，即：

           productionSourceMap: false

3. 启用Gzip压缩，启用压缩后，webpack已经将相应的操作都写好了，不用再特意编辑，打包后css文件与js文件会生成对应的.gz文件，部署到服务器上后，浏览器会先加载相应的gz文件，不过这需要和后端商量好，需要后端进行相应的配置，否则还是会加载打包后的css、js而不加载对应的 .gz文件：

        productionGzip: true

4. 查看打包报告，打包时在 npm run dev 后面加上 --report 即可生成打包报告，打包报告在 127.0.0.1:8888 ，如果配置了默认浏览器，打包完成后会自动打开网页，即：

           npm run build --report

四、按需引入与全部引入的打包报告对比

1.按需引入的报告，iview组件打包后详情如图所示⬇：

2.全部引入，iview组件打包后详情如图所示⬇：