底部加上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. Android Studio 插件(plugins)或者intellij idea 插件(plugins)无法安装

    通常这种情况出现都因为idea.properties修改了 idea.system.path=${指定路径}/system idea.plugins.path=${idea.config.path}/ ...

  2. 【Linux高级驱动】input子系统框架

    [1.input子系统框架(drivers\input)] 如何得出某个驱动所遵循的框架?    1) 通过网络搜索    2) 自己想办法跟内核代码!         2.1 定位此驱动是属于哪种类 ...

  3. IDEA的maven项目中 静态文件编译的问题

    IDEA的maven项目中,默认源代码目录下的xml等资源文件并不会在编译的时候一块打包进classes文件夹,而是直接舍弃掉. 如果使用的是Eclipse,Eclipse的src目录下的xml等资源 ...

  4. 使用python抓取58手机维修信息

    之前在ququ的博客上看到说 python 中的BeautifulSoup 挺好玩的,今天下午果断下载下来,看了下api,挺好用的,完了2把,不错. 晚上写了一个使用python抓取58手机维修信息的 ...

  5. Angularjs中config中置入以下拦截器

    $httpProvider.interceptors.push(['$rootScope', '$q', '$localStorage', function ($rootScope, $q, $loc ...

  6. Xcode6: CocoaPods 错误 target overrides the `OTHER_LDFLAGS`...

    CocoaPods 错误 target overrides the `OTHER_LDFLAGS`... Xcode 升级到 6.0 后,更新 CocoaPods,出现了如下的警告 [!] The ` ...

  7. 浅析C#中的结构体和类

    类和结构是 .NET Framework 中的常规类型系统的两种基本构造. 两者在本质上都属于数据结构.封装着一组总体作为一个逻辑单位的数据和行为. 数据和行为是该类或结构的"成员" ...

  8. swoole 定时器

    timer.php <?php //创建websocket服务器对象,监听0.0.0.0:9502端口 $ws = ); swoole_timer_tick(, function ($timer ...

  9. vim 脚本——插件

    :help usr_41.txt 查看vim默认可添加插件的路径 :set runtimepath? 查看vim系统插件与脚本位置 :echo $VIMRUNTIME :echo $VIM 查看所有插 ...

  10. IOC容器特性注入第六篇:利用MVC注入点,把容器启动

    这里是利用MVC三个注入点中的:IDependencyResolver 进行注入 在全局类中Global.asax代码如下: #region MVC Inject System.Web.Mvc.Dep ...