基於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

 

希望有所幫助！