1. 程式人生 > >VUE + iview使用指南

VUE + iview使用指南

1.iview瞭解;

開發過專案後臺管理系統的人都知道,很多資料都是呈一個列表的形式展現給管理員,或者以各種圖展現。就比如,使用者資料和一些優惠券資訊等都需要以一個列表的形式展現給管理員;再就是一些使用者的消費情況會以曲線圖、折線圖、柱狀圖等展示給管理員,用於使用者分析,方便推薦。而在開發後臺管理系統中,基本上都是很多前端人員參與開發,導致列表樣式和佈局都不一樣,所以開發後臺管理系統很需要一個統一的風格的表格,也需要一個合格的UI設計圖紙才行。故為了節約開發成本,又能實現統一風格,選擇iview是一個不錯的選擇,而且它是一套基於 Vue.js 的高質量 UI 元件庫!

2.iview引用;

1)首先,在你的vue專案中安裝iview依賴;

在你的命令視窗輸入:npm install iview --save(記得要先進去你的檔案所在目錄)

或者先在package.json檔案裡的"dependencies"下寫下:“iview”: “^3.0.0”,

然後再在命令視窗輸入:npm install

均可。

2)安裝之後,然後就在vue專案的入口檔案裡全域性引入它;

即在main.js檔案的頭部寫下:

import iView from ‘iview’;

3)由於通過npm下載的iview外掛會自帶一個樣式檔案,即iview.css,這個檔案也需要匯入進去;

即在main.js檔案的頭部寫下:

import ‘iview/dist/styles/iview.css’;