直接粗暴地上html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
    <Tabs value="name1">
        <Tab-pane label="我是" name="name1">你好</Tab-pane>
        <Tab-pane label="博主" name="name2">我是</Tab-pane>
        <Tab-pane label="秋意正寒" name="name3">秋意正寒</Tab-pane>
    </Tabs>
</div>
<script>
    new Vue({
        el: '#app',
    })
  </script>
</body>
</html>

与最平常的网页没什么不同，重点就是link标签和紧接着的两个script标签了，是对vuejs和iview的引用。

div里的Tabs标签就是iView的组件Tabs！

底下的script标签就是标准的Vuejs写法了~双向绑定。

打开此html文件：

漂亮的Tab分页就出来了。

iView的使用【CDN向】的更多相关文章

  1. IView入门练习~CDN模式全局加载JS

    关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 高质量.功能丰富 友好的 API ,自由灵活地使用空间 细致.漂亮的 UI 事 ...

  2. 解决CDN传统方法引入Iview icon 不显示问题

    因为需要字体文件,可以在github上下载. 将文件下载之后放到fonts文件夹下,fonts文件夹要与Iview.css在同级目录

  3. CDN方式使用iview

    如果没有使用webpack,可以使用我们提供的工具iview-theme来编译 首先需要安装主体生成工具,从npm全局活在项目中局部安装 以全局安装为例: npm install iview-them ...

  4. Iview+Vue CDN NetMvC 简单demo

    1.引用相关js文件 2.菜单采用静态数据加载 3.效果展示 4.代码下载 https://github.com/sulin888/NetVueAdmin.git

  5. 基于 Vue.js 之 iView UI 框架非工程化实践记要

    像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven ...

  6. iView的使用【小白向】

    首先看这篇:构建Vue本地开发环境(现阶段还不知道怎么用CDN的方式做...) 安装iView(WindowsPowershell或cmd下用cnpm) 编辑上一篇博客创建的Vue工程 先到main. ...

  7. Vue + iView + vuex + vee-validate 完整项目总结

    build/*.js config/*.js src/旧代码文件夹 部门最近的一个新项目启动,很幸运由我来主导整个前端部分的技术选型和整体架构,项目工作量很大,但是却没有足够的人手,只有三个连CSS都 ...

  8. iview 非 template/render 标签转换

    在 非 template/render情形下使用 iview,发现除了官方的一些需要注意的点外,还有一些其他需要注意的,这里记录下,防踩坑: 官方说明: 在非 template/render 模式下( ...

  9. iview使用vue-i18n实现国际化

    iview官网中和网上的例子中使用的都是webpack方式,需要import js文件,但是由于项目架构比较简单,没有使用webpack,纯html和js进行交互.所以这里就直接使用js文件引用方式. ...

随机推荐

  1. 最强离线安装MySQL_8.0.2方法

    最强离线安装MySQL_8.0.2方法,一次就能安装成功. 按照此方式,离线安装MySQL五分钟都花不到,节省了大量的宝贵时间. 前戏,假设你已经从MySQL官网中获取了下面这个压缩包: 解压之后变成 ...

  2. 报Cannot change version of project facet Dynamic web module to 2.5 错误

    maven项目老是报这个错误,上网找了很多方法,把Dynamic Web Module的Version改成了2.5,结果还是报错. 后来找到一个方法说在web.xml中,将version改为3.0,就 ...

  3. 升级PyCham到2017.3后import sys模块报错的问题

    今天PyCharm提示升级后选择了更新,根据提示更新成功(2017.3)后发现总是报无法找到sys模块的错误,截图如下: 其实有一条红线留在那里也不影响运行和使用,但总看着不爽. 经过一番研究,由于我 ...

  4. ##3.Keystone 验证服务--openstack

    ##3.Keystone 验证服务 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #SQL上创建数据库并授权 #K ...

  5. Android 7.0 中 ContentProvider 实现原理

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:汪毅雄 导语: 本文描述了ContentProvider发布者和调用者这两在Framework层是如何实现的. 作为Android的四大 ...

  6. POJ 1273 Drainage Ditches 网络流 FF

    Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 74480   Accepted: 2895 ...

  7. SpringBoot零基础入门指南--搭建Springboot然后能够在浏览器返回数据

    File->new Project 修改默认包名,根据自己的喜好修改 选择初始化需要导入的包,尽量不要一开始就导入很多,特别是数据库,不然启动可能会有问题,创建好的目录如下: 配置文件写在app ...

  8. [译]在Asp.Net Core 中使用外部登陆（google、微博...）

    原文出自Rui Figueiredo的博文<External Login Providers in ASP.NET Core> 摘要:本文主要介绍了使用外部登陆提供程序登陆的流程,以及身份 ...

  9. 【WF2017】Mission Improbable

    http://www.lydsy.com/JudgeOnline/problem.php?id=4950 对于俯视图很好解决,把所有不是0的位置拿到剩1就可以了. 对于正视图与侧视图,稍微想一下也能发 ...

  10. springboot学习（三）——http序列化/反序列化之HttpMessageConverter

    以下内容,如有问题,烦请指出,谢谢! 上一篇说掉了点内容,这里补上,那就是springmvc的http的序列化/反序列化,这里简单说下如何在springboot中使用这个功能. 使用过原生netty ...