VUE iview 搭建项目 - 使用总结

2 篇文章 0 订阅
1 篇文章 0 订阅

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。

$ 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

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

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值