vue中vuetify 2版本的使用

之前在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