Vue集成iView詳解

vue3.0+webpack4.0+iview3.0+vuex環境搭建，請見如下文章:
環境搭建詳解
項目地址:點擊這裏

iview集成說明

一、需要引入那些包

npm install iview

//一些其他的包
//加載器
npm install iview-loader --save-dev
//file-loader和url-loader配合使用，當url-loader無法加載時會自動使用file-loader，注意：引入iview.css必須要加載此包
npm intstall file-loader --save-dev
npm intstall url-loader --save-dev
//按需加載
npm install babel-plugin-import --save-dev
//vue/iview的js文件 兼容ie
npm install babel-polyfill --save-dev

二、webpack的配置

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"
      },

三、引入css樣式

首先在main.js使用 import “babel-polyfill”; 兼容ie瀏覽器

在main.js引入 import ‘iview/dist/styles/iview.css’;

四、按需引入

//在.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)全局引入了。

//再需要的地方這樣使用就行了:
<template>
  <div>
    <div class="home">{{message}}</div>
    <Input v-model="message" placeholder="please input data"/>
    <Pagenation></Pagenation>
  </div>
</template>

<script>
import { Input } from "iview";
import Pagenation from "./components/Pagenaton.vue";
export default {
  data() {
    return {
      message: "你好世界！"
    };
  },
  components: { Input, Pagenation }//注意哦，這裏不是components:[]
};
</script>

<style scoped>
.home {
  color: red;
}
</style>

最後項目地址:https://github.com/MrGaoGang/lucky_vue