iView框架的文档   https://www.iviewui.com/docs/guide/install

这里使用的是 npm 来安装,在项目下执行下面命令npm install iview --save:

$ npm install iview --save

npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ iview@2.14.3
added 10 packages from 12 contributors and audited 32865 packages in 17.509s
found 7 vulnerabilities (1 low, 1 moderate, 4 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details

在main.js 里面引入:

import iView from 'iview';
import 'iview/dist/styles/iview.css'; Vue.use(iView);

然后在页面中使用:

<template>
<Row>
<Col span="14">
col-14
</Col>
<Col span="4">
col-4
</Col>
</Row>
</template>

运行就可以看到实现的效果  :)

上面是全部引入该组件库,如果仅使用里面的部分组件,也可以选择按需引入

最后就是统一 iView 标签书写规范,所有标签都可以使用首字母大写的形式,包括 Vue 限制的两个标签 Switch 和 Circle

<Circle :percent="80">
<span class="demo-Circle-inner" style="font-size:24px">
80%
</span>
</Circle>

可以看到虽然添加了进度环,但是在页面上并没有显示出来:

虽然不推荐,但通过 loader 选项配置,可以开启所有标签前缀的写法了,比如 i-date-picker

首先通过 npm 安装 iview-loader  :

npm install iview-loader --save-dev

然后配置 webpack,改写平时 vue-loader 的配置,如下图:

  module: {
rules: [
// {
// test: /\.vue$/,
// loader: 'vue-loader',
// options: vueLoaderConfig
// },
{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: { }
},
{
loader: 'iview-loader',
options: {
prefix: false
}
}
]
},

最后重启服务就行啦:

在vue里面使用iVew框架的更多相关文章

  1. 在vue中使用 layui框架中的form.render()无效解决办法

    下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法. 原文地址:小时刻个人技术博客 > http://small.aiweimeng.top/index.php ...

  2. VUE:渐进式JavaScript框架(小白自学)

    VUE:渐进式JavaScript框架 一.官网 英文 https://vuejs.org/ 中文 https://cn.vuejs.org/ 二:渐进式 即有一个核心库,在需要的时候再逐渐添加插件的 ...

  3. web前端Vue+Django&#160;rest&#160;framework&#160;框架&#160;生鲜电商项目实战视频教程 ☝☝☝

    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...

  4. Vue.js前端MVVM框架实战篇

    相信大家对vue.js这个前端框架有了一定的了解.想必也想把Vue急切的运用在项目中,看看它的魅力到底有多大?别急,今天我会满足大家的想法. 我们一起来看看“Webpack+Vue”的开发模式相比以往 ...

  5. web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍

    web前端Vue+Django rest framework 框架 生鲜电商项目实战  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...

  6. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  7. Vue.JS 对比其他框架

    Angular 选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合: 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部 ...

  8. 优秀的基于VUE移动端UI框架合集

    1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...

  9. Vue vs React: Javascript 框架之战

    https://baijiahao.baidu.com/s?id=1608210396818353443&wfr=spider&for=pc    原文档 正如我们之前提到的,Word ...

随机推荐

  1. 我用ANDROID STUDIO开发,页面上总包这个警告,很烦!网上说是sdk版本问题,但是我是基于25开发的,最小版本也是19,有没有老司机啊?3克油

  2. 二、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)

    2.收信息来到表单提交时URL所指向的servlet文件,获取传递过来的参数值

  3. OpenCV 3.1 Set Camera Resolution 设置相机的分辨率

    在OpenCV中,有强大的处理相机事件的api,但是貌似没有直接获取相机的最大分辨率的函数,通过属性CV_CAP_PROP_FRAME_HEIGHT和CV_CAP_PROP_FRAME_WIDTH直接 ...

  4. Linux下监听或绑定(bind)843端口失败

    问题:写了一个程序,尝试在843端口监听,结果在执行bind的时候失败了 原来,系统不允许用户程序在1-1024端口监听,因为他们是知名端口. 解决办法: 换成root用户,即可成功bind.(ubu ...

  5. 学习方法和阶段介绍 、 iOS界面开发引入 、 构造第一个App 、 视图控制器和视图 、 控件与事件 、 InterfaceBuilder

    1 创建并运行第一个App 1.1 问题 使用Xcode创建一个App项目,该应用实现功能在界面上显示Hello World标签,在模拟器中的运行结果如图-1所示: 图-1 1.2 方案 分析图-1, ...

  6. 随机变量的方差variance &amp; 随机向量的协方差矩阵covariance matrix

    1.样本矩阵 如果是一个随机变量,那么它的样本值可以用一个向量表示.相对的,如果针对一个随机向量,那么就需要利用矩阵表示,因为向量中的每一个变量的采样值,都可以利用一个向量表示. 然后,一个矩阵可以利 ...

  7. ORACLE字符串分组聚合函数(字符串连接聚合函数)

    ORACLE字符串连接分组串聚函数 wmsys.wm_concat SQL代码: select grp, wmsys.wm_concat(str) grp, 'a1' str from dual un ...

  8. opencv for python 之 突出点检测

    opencv下载地址:http://sourceforge.net/projects/opencvlibrary/files/opencv-win/2.4.3/OpenCV-2.4.3.exe/dow ...

  9. 应付系统选项 Payables Options

    (N) AP > Setup > Options > Payables Options应付系统选项设置整个应付系统使用的控制项和默认值.我们可以在此窗口中设置默认值,从而简化供应商输 ...

  10. ubuntu 更改文件所有者

    参考资料:http://teliute.org/linux/Tecli/lesson13/lesson13.html sudo chown -R  username:groupname  filena ...