vue中引入vuetify

官方入门教程：https://vuetifyjs.com/zh-Hans/getting-started/quick-start

引入一个ui库的思路：先下载对应的ui库，其次再引入到自己的项目中

1. 这里用的是npm下载对应的ui库，在项目的根目录下

npm install vuetify --save

     2.以上步骤是安装完Vuetify，安装完成后，在src目录中创建一个名为的文件夹plugins在里面，添加一个vuetify.js文件。代码如下

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
export default new Vuetify()

     3.在项目的根目录中的main.js中添加如下代码，如果已经有了new Vue，那么直接将vuetify加上即可

import Vuetify from 'vuetify'
import vuetify from '@/plugins/vuetify'
Vue.use(Vuetify)
new Vue({
  vuetify,
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

  此时已经全部引入了vuetify   

4.页面中可以用了直接引入vuetify的代码即可

--------------------------------华丽的分割线-------------哈哈哈哈哈----------------------------------------------------------------

如果想按需引入

即在vuetify.js中按需引入，更改vuetify.js，如下

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify, {
  VCard,
  VRating,
  VToolbar,
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VCard,
    VRating,
    VToolbar,
  },
  directives: {
    Ripple,
  },
})

export default new Vuetify()