iview簡單使用+按需加載組件的方法（全局和局部）

1，簡單使用

vue項目中使用iview非常簡單：

首先安裝依賴：

$ npm install iview --save

會安裝最新版本的依賴，安裝完成后package.json會出現如下圖配置

 

表示iview已經安裝完成

然后在main.js中引入“iview”和相應的css文件“iview/dist/styles/iview.css”，並use，即全局引用，如下圖

 

 此時即可以在所有組件中使用iview中的組件了。

2，按需加載

簡單使用很簡單，按需加載也並不復雜

按需加載要在簡單使用的前提下安裝一個依賴： babel-plugin-import

首先安裝此依賴

 

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

 

安裝完成后可在package.json——devDependencies中看到如下屬性

 

 然后在.babelrc文件中plugins屬性中添加如下配置

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

如圖

 

 2.1全局按需加載特定組件

此后需要修改main.js中的引入

如下：

 

 css文件仍然要有，引入的完整iview替換為特定組件，vue.use()替換為vue.component()

此后可在全局使用引入的組件

這樣做的好處是減少引入體積，增快加載效率；

 

2.2局部按需加載特定組件

在安裝和配置babel-plugin-import依賴之后main.js不需要做任何修改

在相應需要用到iview組件的位置作如下引入（本質上跟全局引入是一樣的），如下圖

 

 此時可以在本位置（即特定組件）下使用

2.2ps：此時還有一點需要說明，由於vue是單頁面應用，所以即使是局部加載特定組件，當該組件加載之后就意味着上圖中的spin已經掛載到vue原型上，所以在該組件加載之后，就變成了全局可用組件。

如上，其實局部按需加載特定組件並沒有特別大的意義。