iView放大招了!一口气发布3款新产品
本次发布的主要内容有:
- iView Pro
- iView Pro Admin
- iView 4.0的预告
- iView weapp + mpvue
使用方法:
先安装或引入
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。
$ 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"
}]]
}
然后这样按需引入组件,就可以减小体积了:
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
打开官方文档就可以随意使用了。