VUE项目导入 Vuetify

1、创建Vue项目(webpack或 WebStorm)工具直接创建Vue项目即可。cmd进入项目路径下:

npm install vuetify --save

VUE项目导入 Vuetify_第1张图片

2、进入项目,在 src 目录下创建 plugins 目录,并在 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 文件中引入代码:

import Vuetify from 'vuetify'
import vuetify from '@/plugins/vuetify'

Vue.use(Vuetify)

4、使用过程中,可能 vueyify 的图标、图片都不显示,需要引入图标样式,项目路径下 cmd 运行: 

npm install material-design-icons-iconfont -D

进入 mian.js 文件中添加 引入代码:

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

 

 

 

 

你可能感兴趣的:(vue,Java,vue,vuetify)