通过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后面的字符串就可以了

展示就是下图的样子。