直接粗暴地上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. 【面试问题】——秋招面试中遇到的一些问题&思维导图&反思

    前言:秋招也跑了挺多的公司,虽然都是招Web前端,但是不同的公司,因为需求和目的不同,面试的考察点也是各不相同.我没有实习经验,只有自己学东学西比较杂也比较浅的一些知识积累可以用,这个过程我发现了自己 ...

  2. nginx的基础应用

    nginx的基础应用 一.简介 今天我们将介绍一些nginx的简单应用,启动.停止nginx,重载nginx的配置,nginx配置文件的格式,如何配置nginx服务静态资源,如何配置nginx作为反向 ...

  3. Ceph luminous 安装配置

    Ceph luminous 安装配置 #环境centos7 , Ceph V12 openstack pike 与 ceph 集成 http://www.cnblogs.com/elvi/p/7897 ...

  4. 运行时动态库：not found 及介绍-linux的-Wl,-rpath命令

    ---此文章同步自我的CSDN博客--- 一.运行时动态库:not found   今天在使用linux编写c/c++程序时,需要用到第三方的动态库文件.刚开始编译完后,运行提示找不到动态库文件.我就 ...

  5. C#在自定义事件里传递自定义数据,使用EventArgs的姿势

    EventArgs是包含事件数据的类的基类,用于传递事件的细节.今天分享的是使用泛型来约束EventArgs,在事件里传递自定义数据的例子. 正题 由于这个关注点很小,直接上代码了. 定义泛型类TEv ...

  6. Servlet实践--留言板-v1

    功能介绍: 由三个jsp页面组成,在doGet中根据请求URL中的请求参数不同,跳转到不同的页面: 页面1:显示整个留言板列表 页面2:创建留言页面(包括用户.主题.内容和上传文件) 页面3:在查看单 ...

  7. 大数据学习系列之四 ----- Hadoop+Hive环境搭建图文详解(单机)

    引言 在大数据学习系列之一 ----- Hadoop环境搭建(单机) 成功的搭建了Hadoop的环境,在大数据学习系列之二 ----- HBase环境搭建(单机)成功搭建了HBase的环境以及相关使用 ...

  8. 简陋的斗地主，js实现

    最近闲了两天没事做,用js写了个斗地主,练习练习.代码和功能都很简陋,还有bug,咋只是聊聊自己的思路. 这里说说斗地主主要包含的功能:洗牌,发牌,玩家出牌.电脑出牌,出牌规则的验证,输赢啥的没有判断 ...

  9. Android HandlerThread 源码分析

    HandlerThread 简介: 我们知道Thread线程是一次性消费品,当Thread线程执行完一个耗时的任务之后,线程就会被自动销毁了.如果此时我又有一 个耗时任务需要执行,我们不得不重新创建线 ...

  10. Eureka学习例子

    Eureka学习 Spring Cloud下有很多工程: Spring Cloud Config:依靠git仓库实现的中心化配置管理.配置资源可以映射到Spring的不同开发环境中,但是也可以使用在非 ...