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