iView 2.X 如何使用iView 3.X 的组件？

1，安装babel-plugin-import插件，指令：npm install babel-plugin-import --save-dev。

2，找到 iView 3.X 的源码放在 iView.2X 的 node_modules 下面，重新命名为 iview3 (可更改)。

3，编辑根目录下面的 .babelrc 文件，增加红圈里面的代码，如下图：

4，将 main.js 里面引用 iView 的css换成后导入的css，如：import 'iview3/dist/styles/iview.css';。

5，在 main.js 里面全局导入，也可以在需要用到的模块页面导入，如下图：

最后就可以在页面中使用 iView 3.X 才有的 Drawer 抽屉组件了。

注意：打包的时候可能会遇到下面这种错误

原因是iview中使用了es6语法，然而uglifyJs是不支持的。

解决方法如下：

1，引用 uglifyjs-webpack-plugin 插件，指令：npm install uglifyjs-webpack-plugin@beta --save-dev，不要用官网推荐的。

2，在 webpack.base.config.js 中加入下入代码：

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test'),resolve('/node_modules/iview/src'),
  resolve('/node_modules/iview/packages')]
}

3，在 webpack.prod.config.js 中加入 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

并且注释掉原有的 UglifyJsPlugin 压缩方法，添加下面压缩方法：

new UglifyJsPlugin({
            // 使用外部引入的新版本的js压缩工具
            parallel: true,
            uglifyOptions: {
                ie8: false,
                ecma: 6,
                warnings: false,
                mangle: true,
                // debug false
                output: {
                    comments: false,
                    beautify: false,
                    // debug true
                },
                compress: {
                    // 在UglifyJs删除没有用到的代码时不输出警告
                    warnings: false,
                    // 删除所有的 `console` 语句
                    // 还可以兼容ie浏览器
                    drop_console:
                        true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars:
                        true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars:
                        true,
                }
            }
        })

4，最后就是要注意的是 node_modules 下面的 iview3 文件夹还有吗？没有就再复制进去打包即可。