开始使用vue和vuetify
底部加上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的更多相关文章
- Electron: 如何以 Vue.js, Vuetify 开始应用
Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架 Vue.js: Web 前端用于构建用户界面的渐进式框架 Vuetify: Vue.js 的 ...
- Vue引入vuetify框架你需要知道的几点
1.命令行安装 npm install vuetify --save 2.在src目录中创建一个名为的文件夹plugins在里面,添加一个vuetify.js文件.代码如下 import Vue fr ...
- 【非专业前端】Vue UI 之 建立Vuetify工程
先建立一个工程[Webpack] .. ..建立好之后,进入目录,添加vuetify插件 cd vuetify-demo vue add vuetify[会出错] npm install vuetif ...
- vuetify
vue add vuetify打包之后再发过来另外剪头发 typescript 1.配置 2.当用 let 声明一个变量,它使用的是词法作用域或块作用域. let与var区别,所以要--- 3.看来 ...
- 学习笔记:Vue
https://cn.vuejs.org/v2/api/ 官网API https://cn.vuejs.org/v2/guide/ 官网教程 http://www.runoob.com/vue2/vu ...
- 创建一个自己的Vue UI组件库,并将它发布在npm上
本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...
- Vuetify按需加载配置
自己配置vuetify按需加载的步骤,在此记录: 执行npm install vuetify –save 或 yarn add vuetify添加vuetify添加依赖执行npm install -- ...
- vuetify & electron (开发环境及打包)
1.安装node 2.安装vue/cli $ npm install @vue/cli -g 3.创建应用并进入应用目录$ vue create my-app$ cd my-app 4.添加elect ...
- 从零开始,做一个简单的Vuetify项目,图标安装成功
安装Vuefity的时候,碰到一些坑,经过一番折腾,终于成功,记录正确的姿势如下: 创建一个Vue项目: vue init webpack-simple vular-admin 进入项目目录: cd ...
随机推荐
- [AaronYang原创] 大话ASP.NET MVC3+ (C#与DOM与JS页面上的很炫的技巧)
案例一:比如我要传递一个新闻标题和新闻内容 存储到数据库去 1.最简单的通用Url公式就是 function getUrl() { var d = $("#表单ID").seria ...
- 【转载】JAVA基础:注解
原文:https://www.cnblogs.com/xdp-gacl/p/3622275.html#undefined 一.认识注解 注解(Annotation)很重要,未来的开发模式都是基于注解的 ...
- Kaggle 自行车租赁预测比赛项目实现
作者:大树 更新时间:01.20 email:59888745@qq.com 数据处理,机器学习 回主目录:2017 年学习记录和总结 .caret, .dropup > .btn > . ...
- composer 再centos 下的安装
$ curl -sS https://getcomposer.org/installer | php $ sudo mv composer.phar /usr/local/bin/composer
- BigDecimal提供了8种舍入方式
BigDecimal提供了8种舍入方式 1.ROUND_UP:舍入远离零的舍入模式.在丢弃非零部分之前始终增加数字(始终对非零舍弃部分前面的数字加1).注意,此舍入模式始终不会减少计算值的大小. 2. ...
- Python 中 __all__ 的作用(转)
之前看代码每次遇到import *时就会特别蒙,看到这篇文章一下子就弄明白了,原文地址:https://www.cnblogs.com/alamZ/p/6943869.html 1.测试文件foo.p ...
- Hibernate HQL的使用
1.简单查询(查询所有) Session session=HibernateUtil.getSessionFactory().getCurrentSession(); Transaction tx=s ...
- rhadoop linear regression 问题
library(rhdfs) library(rmr2) hdfs.init() hdfs.delete("/user/output/lm.output") map <- f ...
- 查询Array中确定数值的对象&JS linq使用 = linq.js
var x=new Array(); x.push({"a":3,"b":3},{"a":2,"b":2},{" ...
- [原]Jenkins(十二)---jenkins管理员用户无法登陆解决办法Access Denied
/** * lihaibo * 文章内容都是根据自己工作情况实践得出. *如有错误,请指正 * 版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horiz ...