在使用Vue脚手架的项目中引入iView组件

iView组件是常用的组件，其中包含了大量的常用组件，其官方文档如下：

https://www.iviewui.com/docs/guide/install

在项目中使用iView的方法有两种：

1.直接使用官方的推荐工程，这样就省去了配置的问题，并且可以页面中直接使用：

https://github.com/iview/iview-project

2.第二种方法是安装iVIew组件，并进行一定的配置

https://blog.csdn.net/WXY19951125/article/details/83022688 

一、全局引用

①、先安装iview          

npm install iview -save

       Tips：你可能注意npm install 的时候，有时候会加--save，有时又是--save-dev，那他们该什么情况下区分使用呢。发现一篇比较不错的文章https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html

②、在 webpack 入口页面 main.js 中如下配置

import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
 
Vue.use(iView);

 ③、在组件里面直接调用   如：Default

二、按需引用（前提是按照全局引用的步骤①②安装了需要的组件）

借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。

①、先安装 babel-plugin-import         

 npm install babel-plugin-import --save-dev

②、在文件 .babelrc 中添加配置

"plugins": [
    "transform-vue-jsx", "transform-runtime",
    ["import", {
      "libraryName": "iview",
      "libraryDirectory": "src/components"
    }]
  ]

本以为万事大吉，可以开始用了，但是报错了！！！！！

别慌~~~~~~查阅一些资料之后了解到，添加按需加载的插件之后就不可以用下面的方式引入iview。main.js只需配置css

import Vue from 'vue'
// import iView from 'iview'
import 'iview/dist/styles/iview.css'
 
// Vue.use(iView);

③、按需引用可以在全局注册组件也可以在调用的页面注册

aaa~组件中调用方法

bbb~全局注册需要用的组件

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

在引入iView组件的同时，可能需要配置一下路由：

1.在main.js的同级目录新建router.js文件

const routers = [
    {
        path: '/',
        meta: {
            title: ''
        },
        component: (resolve) => require(['./components/HelloWorld.vue'], resolve)
    },
    {
        path: '/testIview',
        meta: {
            title: ''
        },
        component: (resolve) => require(['./components/testIview.vue'], resolve)
    }
];
export default routers;

2.在main.js里面引入

import VueRouter from 'vue-router';
import Routers from './router';


// 路由配置
const RouterConfig = {
    mode: 'history',
    routes: Routers
};
const router = new VueRouter(RouterConfig);