之前在vue项目中一直使用vuetify1.X
版本,对其比较熟悉了,今天来学习下vuetify 2.X
版本👇👇👇
安装
npm install vuetify --save
引入
-
新建文件(src/plugins/vuetify.js)
// src/plugins/vuetify.js import Vue from 'vue' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify) const opts = {} export default new Vuetify(opts)
-
main.js
// 引入vuetify import vuetify from '@/plugins/vuetify' // path to vuetify export Vue.config.productionTip = false new Vue({ router, store, vuetify, render: h => h(App) }).$mount('#app')
使用组件
到目前为止安装和引入就完成啦,那引入vuetify
中的某个组件来看看吧,比如引入v-btn
:
-
代码
<v-btn color="info">Info</v-btn>
-
结果
嗯?为什么按钮没有颜色呢❓是没有引入样式❓在vuetify.js
里面有样式呀,那是为什么呢❓不妨将App.vue
中的div
改为v-app
试试:效果:
vue中vuetify 2版本的使用就介绍这么多,更多介绍请参考官网。
如果使用官网中的命令vue add vuetify
安装有好有坏吧:
-
优点
会自动生成相关的配置,不需要我们手动去建立上面提到的文件。
-
缺点
会将搭建的vue项目中的元素更换为vuetify组件,如下图所示:
-
App.vue
-
Hello World.vue
-