Webpack4.0+Vue2.6+iView3.0+Vuex环境搭建(２)

vue、vue-route、vuex

npm i vue vue-router vuex //生产依赖
npm i vue-template-compiler vue-loader vue-style-loader -D //开发依赖
复制代码

引入包

1. 安装iview

npm install iview
复制代码

2. 安装iview的加载工具

npm install iview-loader --save-dev
复制代码

3. file-loader和url-loader配合使用，当url-loader无法加载时会自动使用file-loader，注意：引入iview.css必须要加载此包

npm intstall file-loader --save-dev
npm intstall url-loader --save-dev
复制代码

4. 按需加载工具

npm install babel-plugin-import --save-dev
复制代码

5. 兼容IE浏览器插件

npm install babel-polyfill --save-dev
复制代码

修改对应配置

1. 修改webpack.config.js,webpack的module中新增如下配置：

{
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader",
            options: {
              loaders: {
                css: ExtractTextPlugin.extract({
                  use: "css-loader",
                  fallback: "vue-style-loader"
                })
              }
            }
          },
          {
            loader: "iview-loader",
            options: {
              prefix: false
            }
          }
        ]
      },
      {
        test: /iview\/.*?js$/,
        loader: "babel-loader"
      },
      {
        test: /iview.src.*?js$/,//为了兼容ie，否则在ie浏览器无法预览iview组件
        use: [
          {
            loader: "babel-loader"
          }
        ]
      },

      {
        //此处配置为iview的注意点，如果不配置的话 无法再Js文件中加载iview.css文件；其次如果使用url-loader无法加载的话，会使用file-loader进行文件加载
        test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
        loader: "url-loader?limit=1024"
      },
复制代码

2.添加样式

在index.js中添加对应的样式和兼容工具

import "babel-polyfill";
import 'iview/dist/styles/iview.css';
复制代码

集成iview

集成iview有两种方式，一种是按照实际需要引入，一种是全局引入。只可以选其中一种。

１．按需引入，需要在.babelrc/babel.config.js，配置如下内容：

module.exports={
    presets:[
        [
            "@babel/preset-env",
            {
                targets:{
                    "browsers":["last 3 versions","ie>=9"]
                },
                useBuiltIns:"entry",
                debug:false
            }
        ]
    ],
    plugins: [
        [
          "import",
          {
            "libraryName": "iview",
            "libraryDirectory": "src/components"
          }
        ]
      ]
}
复制代码

２．全局使用

Vue.use(iView)
复制代码