vue使用vuetify框架

1.安装vuetify

npm install vuetify --save

2.在main.js中引入相关依赖及初始化

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
new Vue({
  vuetify: new Vuetify(), // vue初始化中加上这一句
}).$mount('#app')

3.安装图标

方法一：本地安装

npm install @mdi/font -D

然后引入对应的样式

import '@mdi/font/css/materialdesignicons.css'

方法二：cdn引入，由于网速原因，有时可能加载不出来

在public/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">

4.在 App.vue 中使用 v-app 包裹组件

App.vue文件

<template>
  <v-app id="app">
    <router-view />
  </v-app>
</template>

官方链接

然后就可以愉快的使用啦！