开始使用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 ...
随机推荐
- ql.io来自ebay的api快速集成的构建api的框架
说的有点绕口,实际上是为了减轻在Web上请求数据的复杂度,eBay推出了自己的Web查询语言——ql.io,ql.io将多个独立的API请求绑定成一个单独的请求. ---待续
- 12.翻译系列:EF 6 中配置一对多的关系【EF 6 Code-First系列】
原文链接:https://www.entityframeworktutorial.net/code-first/configure-one-to-many-relationship-in-code-f ...
- xmind指定32位jdk解决在64位系统上不能启动的问题
在xmind.ini文件的第一行添加下面的内容: -vmF:\kfgj\Java32.1.6\jdk1.6.0_16\bin\javaw.exe (根据实际情况指定32位jdk的javaw.exe文件 ...
- samba需求,请建一个目录,所有用户都可以修改其中的任意文件(新建文件的权限问题)
我的配置如下: [TMP] comment = Public Stuff path = /DATA/samba/tmp public = yes writable = yes create mode ...
- build MYSQL source code Using visual studio 2017
https://dev.mysql.com/doc/refman/8.0/en/installing-source-distribution.html cmake .. -G "Visual ...
- 每日英语:Doc, Do I Need A Juice Cleanse?
Some drink only vegetable juice. Others soak in Epsom salts. It's all in the pursuit of ridding the ...
- Kaggle 自行车租赁预测比赛项目实现
作者:大树 更新时间:01.20 email:59888745@qq.com 数据处理,机器学习 回主目录:2017 年学习记录和总结 .caret, .dropup > .btn > . ...
- Oracle同一个用户下启动多个数据库实例
oracle@yingxiang-testServer1 oradata]$ export ORACLE_SID=APPDB[oracle@yingxiang-testServer1 oradata ...
- 【iCore4 双核心板_FPGA】例程七:状态机实验——状态机使用
实验现象:按键每按下一次,三色LED改变一次状态. 核心代码: //--------------------module_rst_n---------------------------// modu ...
- hdoj:2024
#include <iostream> #include <string> #include <vector> using namespace std; int m ...