底部加上vue的script

<!-- development version, includes helpful console warnings -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- vuetify -->
<script src="https://unpkg.com/vuetify@1.0.17/dist/vuetify.min.js"></script>

样式引用

<link href="https://cdn.staticfile.org/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css" rel="stylesheet"/>
<link href="https://unpkg.com/vuetify@1.0.17/dist/vuetify.min.css" rel="stylesheet">
<style>
[v-cloak] {
display: none;
}
</style>

页面body体上加入展示元素

<div id="app">
<v-content v-cloak>
<v-container>
<h1 :title="msg">Hello, single Vue!</h1>
</v-container>
</v-content>
</div>

启动js

var app = new Vue({
el: '#app',
data: {
msg: 'Hello'
}
})

完整版

https://gist.github.com/terwer/0f9e19c1a2f345e04c2eb91609489026

在线查看

https://runjs.cn/detail/kpscnn6a

开始使用vue和vuetify的更多相关文章

  1. Electron: 如何以 Vue.js, Vuetify 开始应用

    Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架 Vue.js: Web 前端用于构建用户界面的渐进式框架 Vuetify: Vue.js 的 ...

  2. Vue引入vuetify框架你需要知道的几点

    1.命令行安装 npm install vuetify --save 2.在src目录中创建一个名为的文件夹plugins在里面,添加一个vuetify.js文件.代码如下 import Vue fr ...

  3. 【非专业前端】Vue UI 之 建立Vuetify工程

    先建立一个工程[Webpack] .. ..建立好之后,进入目录,添加vuetify插件 cd vuetify-demo vue add vuetify[会出错] npm install vuetif ...

  4. vuetify

    vue add vuetify打包之后再发过来另外剪头发 typescript 1.配置 2.当用 let 声明一个变量,它使用的是词法作用域或块作用域. let与var区别,所以要--- 3.看来 ...

  5. 学习笔记:Vue

    https://cn.vuejs.org/v2/api/ 官网API https://cn.vuejs.org/v2/guide/ 官网教程 http://www.runoob.com/vue2/vu ...

  6. 创建一个自己的Vue UI组件库,并将它发布在npm上

    本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...

  7. Vuetify按需加载配置

    自己配置vuetify按需加载的步骤,在此记录: 执行npm install vuetify –save 或 yarn add vuetify添加vuetify添加依赖执行npm install -- ...

  8. vuetify & electron (开发环境及打包)

    1.安装node 2.安装vue/cli $ npm install @vue/cli -g 3.创建应用并进入应用目录$ vue create my-app$ cd my-app 4.添加elect ...

  9. 从零开始,做一个简单的Vuetify项目,图标安装成功

    安装Vuefity的时候,碰到一些坑,经过一番折腾,终于成功,记录正确的姿势如下: 创建一个Vue项目: vue init webpack-simple vular-admin 进入项目目录: cd ...

随机推荐

  1. argparse - 命令行选项与参数解析

    argparse模块作为optparse的一个替代被添加到Python2.7.argparse的实现支持一些不易于添加到optparse以及要求向后不兼容API变化的特性,因此以一个新模块添加到标准库 ...

  2. [BigData - Hadoop - YARN] YARN:下一代 Hadoop 计算平台

    Apache Hadoop 是最流行的大数据处理工具之一.它多年来被许多公司成功部署在生产中.尽管 Hadoop 被视为可靠的.可扩展的.富有成本效益的解决方案,但大型开发人员社区仍在不断改进它.最终 ...

  3. shell-整理目录下的备份文件并生成压缩包

    背景: CI构建下来的备份应用包在服务器上保留几十个,空间占用大,看着不好看,可能还用不着,所以准备正好练练手吧! 其实CI上可以设置少保留几个,但是我没管.我只是想练练脚本 先来看一下我的服务器源目 ...

  4. react-router 4.3 js实现跳转

    import React, {Component} from 'react'; import { NavLink,Link } from "react-router-dom"; i ...

  5. linux环境下,对于一个大文件,如何查看其中某行的内容

    需求说明: 今天在做mysql数据导入的过程中,导入到最后有一个报错,报某张表不存在.然后就想看看这行到底是在做什么操作的时候报的错误. 报错信息: [mysql@host---- ~]$ cat n ...

  6. [JS] ECMAScript 6 - String, Number, Function : compare with c#

    字符串的扩展 正则的扩展 数值的扩展 函数的扩展 字符串的扩展 js 字符的 Unicode 表示法 codePointAt() String.fromCodePoint() 字符串的遍历器接口 at ...

  7. vue跨域代理配置

    实际:http://a.com/b.php 代理:http://localhost/b.php 配置config/index.js proxyTable: { '/api': { target:'ht ...

  8. Nginx-设定允许的ip和要拒绝的ip

    作用范围和配置的顺序有关系,先配置的优先级高,会覆盖和后一个配置重合的部分, 可以添加多个allow和多个deny: 1)这个配置127.0.0.1可以通过访问. allow 127.0.0.1; d ...

  9. [Android] 基于 Linux 命令行构建 Android 应用(六):Android 应用签名

    Android 要求所有应用在安装前必须使用证书进行数字签名.Android 使用该证书来确定一个应用以及其作者身份,该证书不要求由证书发行机构颁发,因此 Android 应用经常使用自我签名的证书, ...

  10. css - 兼容适配坑点总结(。。。)

    1. transform为代表的这些css3属性一定要写-webkit-,不然低版本(目前遇到的是8)的苹果,不支持. 2. x的适配 /* x */ @media only screen and ( ...