Vuetify 使用步骤

中文文档 —— 快速开始

1. 安装

npm install --save vuetify

2. 在 `main.js` 中引入并使用

// main.js
// 引入vuetify
import Vuetify from 'vuetify'
// 使用vuetify
Vue.use(Vuetify)

3. 安装字体和图标

方法 1⃣️ ：在 index.html 中引入

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">

方法 2⃣️ ：npm 安装

npm install material-design-icons-iconfont -D
npm install @mdi/font -D

4. 引入 vuetify 样式

import 'vuetify/dist/vuetify.min.css'

5. 开始使用

在 app.vue 中必须使用 <v-app></v-app> 包裹组件。
Error: Vuetify is not properly initialized 的解决方案：
在 main.js 中的 new Vue({}) 里加上：vuetify: new Vuetify(),。

// main.js
new Vue({//定义Vue绑定的根元素el: '#app',//将上面声明的路由器传递到根Vue实例router,//初始化Vuetifyvuetify: new Vuetify(),//声明App组件，这样<App/>元素就可以生效components: {App},//用<App/>代替根元素template: '<App/>'
}).$mount('#app') //将这个实例挂载到id=app的根元素上

<!-- App.vue -->
<template><v-app id="app"><!--路由管道标签，任何符合某一路由(route)信息的组件都会在这个标签内展示出来 --><router-view></router-view></v-app>
</template>

然后在各 .vue 文件中使用 Vuetify 组件即可。

（2020.4.2 更新）

今天又一次重新引入了 Vuetify ，发现 ……
Vue CLI 真香 ……
直接一条命令，vuetify 就能直接用了！！！

vue add vuetify

Vuetify 使用步骤相关推荐

组件用.vue还是.js_如何使用Vue.js 2.0构建灵活的图像上传器组件
组件用.vue还是.js by Cathy Ha 由凯茜·哈(Cathy Ha) 如何使用Vue.js 2.0构建灵活的图像上传器组件 (How to build a flexible image u ...
vuetify-使用详细入门教程
写在前面的话,公司工作很久了,一直都没有改过自己的技术栈,才觉得慢慢的落后于潮流,也知道自己的技术栈很老旧,想过要重构项目,但是项目周期时间一直不许,学习vue只能在下班的时间里面,这两年也断断续续的 ...
使用vuetify2.0的正确姿势
2019年7月14日补充因为1.0的时候文档很不完善,用起来有很多坑,只能不断看国外大佬或者官方的项目来总结.这个是根据我看的一些国外大佬的视频.文档,以及自己在平时中使用心得总结的用法.现在出了2 ...
vuetify使用详细入门步骤和日历的教程,方便下次使用，记录下来。
公司最近项目使用vuetify第三方UI库,看了文档一个很好用的UI库pc端和移动端都很好用,可以兼顾两个端口. 图片如下: 解决bug: 初始创建项目cmd运行创建,首先vue/cli脚手架必须是全 ...
Vuetify学习记录（三）-- v-data-table
目录前言一.基础属性二.事件绑定 1. click:row 2. contextmenu:row(右键单击)和dblclick:row(双击) 三.插槽的使用 1. body(自定义整个表格) ...
vue中引入vuetify
官方入门教程:https://vuetifyjs.com/zh-Hans/getting-started/quick-start 引入一个ui库的思路:先下载对应的ui库,其次再引入到自己的项目中这 ...
vuetify ip输入_Vuetify国际电话输入
vuetify ip输入 vue电话输入vuetify (vue-tel-input-vuetify) International Telephone Input with Vuetify. Vuet ...
使用Vuetify构建音乐播放器
您将要创造的使用Vue.js构建应用程序非常容易,有趣且令人愉快. 您可以以最少的精力构建可运行的应用程序. 为了证明这一点,今天我将向您展示构建自己的功能齐全的音乐播放器有多么容易. 为了使事情变 ...
vue项目引入Vuetify
提示:本项目是先使用了若依框架进行开发后进行添加Vuetify 文章目录前言如何安装? Vue CLI 安装二.使用步骤前言 Vuetify的某些ui组件动效非常不错,想要添加在已有的项目内使 ...

Vuetify 使用步骤

1. 安装

2. 在 `main.js` 中引入并使用

3. 安装字体和图标

4. 引入 vuetify 样式

5. 开始使用

Vuetify 使用步骤相关推荐

最新文章

热门文章

Vuetify 使用步骤

1. 安装

2. 在 main.js 中引入并使用

3. 安装字体和图标

4. 引入 vuetify 样式

5. 开始使用

Vuetify 使用步骤相关推荐

最新文章

热门文章

2. 在 `main.js` 中引入并使用