VUE + iview使用指南

iview学习地址：https://www.iviewui.com/

1.iview了解；

开发过项目后台管理系统的人都知道，很多数据都是呈一个列表的形式展现给管理员，或者以各种图展现。就比如，用户数据和一些优惠券信息等都需要以一个列表的形式展现给管理员；再就是一些用户的消费情况会以曲线图、折线图、柱状图等展示给管理员，用于用户分析，方便推荐。而在开发后台管理系统中，基本上都是很多前端人员参与开发，导致列表样式和布局都不一样，所以开发后台管理系统很需要一个统一的风格的表格，也需要一个合格的UI设计图纸才行。故为了节约开发成本，又能实现统一风格，选择iview是一个不错的选择，而且它是一套基于 Vue.js 的高质量 UI 组件库！

2.iview引用；

可参考：http://v1.iviewui.com/

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’;

---

本文来自 Charles_Tian 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/Charles_Tian/article/details/81980409?utm_source=copy