vuetify学习

vuetify

安装vuetify3.0以上的脚手架的相关步骤：

官网：https://vuetifyjs.com/zh-Hans/getting-started/quick-start 每一个 vue 都是一个组件，相当于一个js文件，vue文件默认导出为文件类名。

   工具栏  网页顶部菜单
         工具条不随鼠标上下拖动而改变
         工具栏背景颜色
      

1.npm install -g @vue/cli@3

2.vue create vuetify4

3.vue add vuetify

4.npm run serve

5.vuetify图标的安装

npm install material-design-icons-iconfont-D

在main.js中引用

import 'material-design-icons-iconfont/dist/material-design-icons.css'

   图标

      
        默认输出home.vue
   

Navi.vue

sing.vue

• 结果展示
  home
  
  about
  
  sing
  

vuetify 学习

1、新建一个空项目，在空项目的ternimal下输入：vue create xxxx ,建立vue项目；

2、建立vue项目后，在命令行输入：vue add vuetify 在vue项目里添加vuetify，是vue项目更加漂亮和方便。