开始使用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 ...
随机推荐
- 译:1. RabbitMQ Java Client 之 "Hello World"
这些教程介绍了使用RabbitMQ创建消息传递应用程序的基础知识.您需要安装RabbitMQ服务器才能完成教程 1. 打造第一个Hello World 程序 RabbitMQ是一个消息代理:它接受和转 ...
- js 对象数组查找元素常用方法
let the_spec_List_Vaule = res.Data.Spec_List_Vaule.find(function(x) { return x.Spec_Item_List == pro ...
- 每日英语:Mystery Medical Symptoms Hit a Surprising Number of Patients
It's a common scenario: You have an odd pain for weeks or are feeling too tired lately. So you head ...
- C++调用外部应用程序
很多时候,我们的程序需要调用DOS命令,通过Dos命令调用其他程序从而完成所需要完成的功能.比如,调用Dos程序PKZIP完成ZIP包的解压缩,调用SVN完成文件的更新或者上传.但是在程序运行时又要求 ...
- Python 读取csv的某行
站长用Python写了一个可以提取csv任一列的代码,欢迎使用.Github链接 csv是Comma-Separated Values的缩写,是用文本文件形式储存的表格数据,比如如下的表格: 就可以存 ...
- 【九天教您南方cass 9.1】 10 DTM土方计算的四种方法
同学们大家好,欢迎收看由老王测量上班记出品的cass9.1视频课程 我是本节课主讲老师九天. 我们讲课的教程附件也是共享的,请注意索取测量空间中. [点击索取cass教程]5元立得 (给客服说暗号:“ ...
- React Native - FlexBox弹性盒模型
FlexBox布局 1. 什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫FlexBox,意为"弹性布局",旨在通过弹性的方式来对 ...
- Threads vs. Tasks
Posted on Friday, October 11, 2013 .Net has three low-level mechanisms to run code in parallel: Thre ...
- java获取视频缩略图
近期由于在做一个关于视频播放的项目,需要使用程序自动获取视频文件的缩略图,特写此文供其他人参考,有不清楚之楚可以给我留言. 1.使用工具:ffmpeg, 官网下载地址:http://ffmpeg.or ...
- [Linux] 硬盘构造与分区
首先让我们从物理结构上了解一下硬盘的存储原理. 硬盘构造示意图: 1. head:磁头,磁盘盘面上的磁头,有几个磁头,就有几个盘面.从0开始编号,最大255,表示总共256个磁头. 2. cylind ...