1.全局引入

在项目入口文件./main.js中需要配置如下：

  1. import Vue from 'vue'
  2. import iview from 'iview'
  3. import 'iview/dist/styles/iview.css'
  5. Vue.use(iview)

2.按需引入

首先你需要安装一个babel插件: npm install babel-plugin-import —save-dev

在vue-cli3生成的项目中，babel的配置文件是babel.config.js，默认配置是这样的：

  1. module.exports = {
  2.   presets: [
  3.     '@vue/app'
  4.   ]
  5. }

你需要将刚刚安装的插件添加进去，添加后的内容如下：

  1. module.exports = {
  2.   presets: [
  3.     '@vue/app'
  4.   ],
  5.   'plugins': [['import', {
  6.     'libraryName': 'iview',
  7.     'libraryDirectory': 'src/components'
  8.   }]]
  9. }

接下来在main.js里你可以这样按需引入：

  1. import 'iview/dist/styles/iview.css' // iview的样式文件还是要引入的
  2. import { Button, Table } from 'iview'
  3. Vue.component('Button', Button)

在非template/render模式下，包括JSX写法中，组件名要用分隔形式，如DatePicker要写为date-picker。而对于iview中名称和原生HTML标签名相同的组件，需要加i-前缀，如Button要写为i-button。

我们可以通过配置iview-loader来解决Switch在任何模式下都必须写为i-switch，Circle要写为i-circle的问题。

3.vue-cli3.0中配置iview-loader

首先需要安装iview-loader：

npm install iview-loader —save-dev

接下来在vue.config.js中添加iview-loader：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('iview')
      .loader('iview-loader')
      .options({prefix: false})
  }
}