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

 

但願有所幫助！