开始使用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 ...
随机推荐
- Android UI系列-----LinearLayout的综合使用
这里将会对LinearLayout的布局方式进行一个综合的使用,通过一个例子来看看LinearLayout的嵌套布局方式,在这之前首先介绍三个属性: 1.①android:layout_weigth: ...
- 一个vue请求接口渲染页面的例子
new Vue({ el:'#bodylist', data: { list: [ { "type_id": "1", "type_name" ...
- Android Studio updating indices 一直刷新和闪烁
Android Studio 更新到了 3.1.3 版本,在导入了工程以后,一直出现了 updating indices 刷新的情况,造成闪烁,在切换到其他视图以后,Android Studio 会一 ...
- 物联网架构成长之路(18)-接阿里云OSS服务
1.申请/购买OSS服务 在阿里云上申请/购买OSS服务, 然后在会得AccessKeyID,AccessKeySecret,bucketName 这三个东西 2.增删改查 在pom.xml文件上增加 ...
- C++/C 宏定义(define)中# ## 的含义(转)
http://hi.baidu.com/kiraversace/item/1148ee057147981a4ac4a3e9 C++/C 宏定义(define)中# ## 的含义 define 中的# ...
- ES6,扩展运算符的用途
ES6的扩展运算符可以说是非常使用的,在给多参数函数传参,替代Apply,合并数组,和解构配合进行赋值方面提供了很好的便利性. 扩展运算符就是三个点“...”,就是将实现了Iterator 接口的对象 ...
- Go Revel - Deployment(部署)
##概览 下面列出了部署的一些方法: 1.本地构建程序并拷贝至服务器 2.在服务器上获取更新代码,然后构建并运行 3.使用`Heroku`来管理部署 使用交互式的命令行会话来进行部署 - 通常需要一种 ...
- Intelij U
1.https://link.jianshu.com/?t=http://idea.lanyus.com/,下载JetbrainsCrack-2.6.2.jar,放到bin目录 2.编辑bin目录下面 ...
- php 无限分类 树形数据 格式化
测试demo ------------------------------------------------------------------------------------ <?php ...
- Java如何验证电子邮件地址格式?
在Java编程中,如何验证电子邮件地址格式? 以下示例演示如何使用String类的matches()方法来验证电子邮件地址. package com.yiibai; public class Vali ...