VUE iview 搭建项目 - 使用总结

iView 放大招了!一口气发布 3 款新产品

本次发布的主要内容有：

iView Pro
iView Pro Admin
iView 4.0 的预告
iView weapp + mpvue

iView 2019 发布会视频观看

使用方法：

先安装或引入

CDN 引入

通过 unpkg.com/iview 可以看到 iView 最新版本的资源，也可以切换版本选择需要的资源，在页面上引入 js 和 css 文件即可开始使用：

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>

NPM 安装

推荐使用 npm 来安装，享受生态圈和工具带来的便利，更好地和 webpack 配合使用，推荐使用 ES2015。

1	$ npm install iview --save

使用 vue CLI3

引入 iView 方法一：

一般在 webpack 入口页面 main.js 中如下配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(iView);

引入成功，在你需要的地方直接使用组件。

引入 iView 方法二：

按需引用

借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：

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

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

然后这样按需引入组件，就可以减小体积了：

1
2
3

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);

特别提醒

按需引用仍然需要导入样式，即在 main.js 或根组件执行 import ‘iview/dist/styles/iview.css’;

引入成功之后

https://www.iviewui.com/docs/guide/install

打开官方文档就可以随意使用了。