基于vue-cli 引入iview ui

适合小白用来上手;

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

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

一、安装：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

 

但愿有所帮助！