开始使用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 ...
随机推荐
- git报ssh variant 'simple' does not support setting port解决办法
解决办法 在git bash中输入命令 1 git config --global ssh.variant ssh 照着来一遍,肯定解决
- Android开发(十八)——头部、中部、底部布局技巧
头部.中部.尾部布局涉及到布局内容自适应,总结两个技巧: 第一种相对布局: <?xml version="1.0" encoding="utf-8"?&g ...
- CodeCombat编程游戏
一. 介绍 官方网站:http://cn.codecombat.com/ 项目地址:https://github.com/codecombat/codecombat CodeCombat 是一个通过玩 ...
- Linux查看文件总的数据行数,并按行拆分
先利用 wc -l BLM.txt 读出 BLM.txt 文件一共有多少行. 再 1. 以行数拆分 -l 参数: split –l 50 原始文件 拆分后文件名前缀 例:以50行对文件进行 ...
- Java知多少(38)抽象类的概念和使用
在自上而下的继承层次结构中,位于上层的类更具有通用性,甚至可能更加抽象.从某种角度看,祖先类更加通用,它只包含一些最基本的成员,人们只将它作为派生其他类的基类,而不会用来创建对象.甚至,你可以只给出方 ...
- 《深入理解Java虚拟机》读书笔记:垃圾收集器与内存分配策略
请移步至:http://zhanjindong.info/2014/05/18/java-gc/
- Ubuntu下安装hbase
1.在清华镜像站点下载hbase的安装文件,选择的是stable的版本,版本号是hbase-1.2.5/ 2.解压放在/usr/local的目录下 3.修改权限 sudo chown -R hduse ...
- 使用UWA GOT优化Unity性能和内存
优化百科: https://blog.uwa4d.com/archives/Index.html https://blog.uwa4d.com/archives/Introduction_UWAGOT ...
- localhost兼容js不能用
- 【PostgresSQL】同时更新两个表
UPDATE table1 SET column = value FROM table2 WHERE table1.column2 = table2.column2