当前位置:   article > 正文

Vuetify学习笔记 (一) 安装和布局_vue搭建vuetify

vue搭建vuetify

Vuetify学习笔记 (一) 安装和布局

说明

由于官网说的比较散。我这里想起什么难点,就记录什么。
我写这篇文章的时间是 2022年1月26日16:27:41

起步

这里推荐直接通过vue-cli进行安装,会方便很多

1.先安装vue-cli
https://cli.vuejs.org/zh/guide/installation.html

2.通过vue-cli创建项目

vue create 你的项目名称
  • 1

3.进入项目,添加vuetify

vue add vuetify
  • 1

4.然后运行 理论上就可以看到 了

npm run serve
  • 1

关于项目结构

vuetify官方推荐的App.vue结构

按道理,这里应该放在快速入门的章节,搞不懂为什么要放在UI组件里面,来说,而且还是根据首字母的顺序来排序…

可以看到官网这里说的
https://vuetifyjs.com/zh-Hans/components/application/#section-9ed88ba45e94752868078bb0

在这里插入图片描述

里面描述了App.vue 文件应该如何写的例子,,以及v-app v-main等说明。也就是简单的vue入口的架构搭建的建议

关于布局

同样。这里官网的说明,也比较分散。一共有两处对布局进行了相关说明

1.预设布局

https://vuetifyjs.com/zh-Hans/getting-started/wireframes/

在这里插入图片描述

这里,对你需要的布局,点进去,即可看到github上的vue源码了。 复制过来用即可

2. 布局(特性描述)

https://vuetifyjs.com/zh-Hans/features/layouts/

在这里插入图片描述

这里 应该就是比较具体的描述布局的说明了(虽然内容还是很精简啊…)

划重点 app属性

在这里插入图片描述

3.v-container是个什么鬼?(学习官网的通用方法)

借着这个例子,记录一下如何利用官网进行学习。

布局这个内容看着看着。就突然来了个v-container,然后没下文了。我草。什么鬼

在这里插入图片描述

哎,还好有个全文检索的功能,搜索看看吧
在这里插入图片描述

看到api
在这里插入图片描述

跟没写一样…
点组件页面的grids连接看看?

shit!,现在才看到了相关的说明。真绕了一大圈。。。

布局相关的2个元素

  • v-container
  • v-layout

v-container

这个应该理解为容器的意思。也就是把业务需要的元素 都应该放在v-container容器里面。然后再该标签class 里面,使用vuetify提供的样式 布局 排版等

官方说明

v-container 提供了将你的网站内容居中和水平填充的功能。 你还可以使用 fluid 属性将容器在所有视口和设备尺寸上完全扩展。 保持了之前 1.x 的功能,其中属性作为 v-container 上的类进行传递,以使应用辅助类(如 ma-#/pa-#/fill-height)生效

v-layout

目前没有发现 v-layout 和 v-container作用上太大的区别。
但是写法有区别。例如有一个垂直居中的属性(fill-height)。v-container是写在class里面。但是v-layout是直接以元素属性的形式出现

如下:

<v-container class="fill-height">  
some things....
</v-container>

<v-layout fill-height>
some things....
</v-layout>  


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/475537
推荐阅读
  

闽ICP备14008679号