底部加上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. 适合初学者的python实际例子

    最近在github上发现了一个有意思的项目,很适合初学者学习python代码. 学习一门语言刚开始的时候是很枯燥的,各种概念语法以及无聊的打印都会让人失去更进一步学习的动力. 很多同学在学习了一段时间 ...

  2. Android launchMode SingleTask newIntent 的问题

    前置条件 项目中,采用 MainActivity + 3个 fragment 的模式作为主要框架.MainActivity 使用 singleTask 模式启动.Fragment 采用 show/hi ...

  3. linux每日命令(11):cat命令

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 一.命令格式: cat [参数] [文件] ...

  4. linux每日命令(39):lsof命令

    lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控制协议 ...

  5. 使用Fidder将生成环境代码映射到本地(文件夹)

    匹配生产URL正则表达式 regex:http://www.a.com/statics/js/(.*) 本地路径配置 D:\web\statics\js\$1

  6. 命令查看linux主机配置

    查看cpu: # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cp ...

  7. Weka算法Clusterers-Xmeans源代码分析(一)

    <p></p><p><span style="font-size:18px">上几篇博客都是分析的分类器算法(有监督学习),这次就分 ...

  8. 【Git】简单使用

    [Git & Github] 首先不能混淆两者的概念.git是一个类似于svn的版本管理工具.其可以在本地建立起针对一个项目的众多维度的版本管理体系,提升了开发的效率. 相对的,我们如果想要和 ...

  9. Java如何使套接字向单个客户端显示消息?

    在Java编程中,如何使用套接字向单个客户端显示消息? 以下示例演示了如何使用Socket类的ssock.accept()方法向单个套接字客户端上显示消息. package com.yiibai; i ...

  10. ubuntu: apt-get update的时候遇到“Hash Sum mismatch”错误

    http://blog.csdn.net/xjwjava/article/details/8543768 http://askubuntu.com/questions/140246/how-do-i- ...