vuetify学习

最新推荐文章于 2024-08-30 09:35:29 发布

没在尽心，怎么可能

最新推荐文章于 2024-08-30 09:35:29 发布

阅读量1.6k

点赞数 1

分类专栏： PAT 文章标签： vuetify

本文链接：https://blog.csdn.net/TONGZONGE/article/details/106533821

版权

本文档介绍了如何安装和使用Vuetify 3.0以上的版本。首先，通过`npm install -g @vue/cli@3`全局安装Vue CLI 3，接着创建名为`vuetify4`的新项目，再用`vue add vuetify`添加Vuetify支持。运行`npm run serve`启动服务，然后在`main.js`中引入图标配置。最后，学习了Vuetify的基础应用，包括创建项目和美化界面。

摘要由CSDN通过智能技术生成

vuetify

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

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

<!--<v-app-bar app dark class="indigo ">-->   工具栏  网页顶部菜单
      <!--app-->   工具条不随鼠标上下拖动而改变
      <!--color="primary"-->   工具栏背景颜色
      <!--dark-->

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'

<v-icon></v-icon>   图标
<v-content>
      <Navi/>
      <router-view/>  默认输出home.vue
   </v-content>

Navi.vue
<template>

  <div>
      <div>this is hello world page!</div>//导航条的上端
     <v-toolbar  app light>  导航条设置
       <v-app-bar-nav-icon class="grey--text" @click="drawer=!drawer"></v-app-bar-nav-icon>  抽屉 目的是 隐藏和展示左侧的工具树
         <v-toolbar-title class="text-uppercase grey--text">
            <