通過vue3.0創建一個vuetify的項目

參考我上一篇文章https://www.cnblogs.com/bingchenzhilu/p/11690402.html

創建完成后，我創建的名稱是vuetify

通過       cd  vuetify到達該級目錄

輸入vue  add vuetify命令

 

 

 選擇默認項即可，下圖是安裝成功的樣子

 

 打開的項目目錄是這樣的

 

 使用yarn  serve 運行項目-----------------------此處需要注意，項目會打開很慢，但是沒有報錯，在network中發現導致項目變慢的。

 

解決方法就是在public下的index.html中注釋或者刪除掉link的兩行，再重啟服務就沒問題了。

 

 就是這兩行

如果想使用vuetify自帶的字體圖標

 先輸入yarn add   @mdi/font        以安裝依賴

再修改plugins下面的vuetify.js文件，改成下面這個樣子就可以了

import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
    icons: {
        iconfont: 'mdi', // default - only for display purposes
    },
});

　　然后使用是這樣的  <v-icon>mdi-clock</v-icon>   后面就修改mdi后面的字符串就可以了

展示就是下圖的樣子。