2024年Web前端最全Vuetify学习笔记 (一) 安装和布局，web前端面试的问题

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

vue add vuetify

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

npm run serve

关于项目结构

=================================================================

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提供的样式 布局 排版等

官方说明

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

506983a38ca2b86545fc6.png)

JavaScript

前端资料汇总