基于vue-cli 引入iview ui

适合小白用来上手;

iView UI 引入分为两种方式：一种是全局引用，另一种是按需引用。与ELEMENT UI引入方式雷同。不管是哪一种的都需要第一步安装。

(假设看此篇文章的你已经搭建好vue-cli)

1、安装：cnpm install iview --save

 

方式一：全局引用

在main.js文件配置：

import iView from 'iview'; 

import 'iview/dist/styles/iview.css';（无论全局还是局部都需要引入）

 

Vue.use(iView);

 

可以在官网copy你所需要的插件

 

方式二：按需引入

01.借助插件 cnpm i babel-plugin-import --save-dev

02.新建文件，名称 .babelrc

　在.babelrc中配置如下：

{ "plugins": [["import", { "libraryName": "iview", "libraryDirectory": "src/components" }]] }

在main.js里按需引入组件;（举个栗子 button）

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

 

注意：按需引用时要注释掉：

　　　import iView from 'iview';

　　　Vue.use(iView)

　　　否则会报错

 

说一下 .babelrc

rc结尾的文件通常代表运行时自动加载的文件，配置等等，类似bashrc,zshrc而且在babel6中，这个文件必不可少。

 

详情参考：

https://www.jb51.net/article/135225.htm

https://blog.csdn.net/zhanglongdream/article/details/53875320

iViewUI官网：https://www.iviewui.com/docs/guide/install

 

希望有所帮助！