第二期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 仿 itch.io 平台主页。
我的主题 HapiGames 是仿 itch.io 的 indie game hosting marketplace。
效果图
代码仓库
alicepolice/Vue at 06 (github.com)
风格指南
当你掌握一门语言的时候，在写项目之前不妨先看看风格指南吧，前人早为你铺好了路。下面是我自己编写项目代码时没有规范到位的几个点。
Prop 定义
Prop 定义应该尽量详细，至少需要指定其类型。Props | Vue.js (vuejs.org)
Vue的选项式API为我们提供了Prop校验，你可以向 props 选项提供一个带有 props 校验选项的对象,当 prop 的校验失败后，Vue 会抛出一个控制台警告 (开发模式)。（如果用ts的话更好）
注意 prop 的校验是在组件实例被创建之前，所以实例的属性 (比如 data、computed 等) 将在 default 或 validator 函数中不可用。
v-for和v-if同时在一个标签时，将v-if提取到计算属性
因为 v-for 优先级比 v-if 高，所以每次渲染时必定会遍历数组所有元素。避免 v-if 和 v-for 用在一起
将v-if提取到计算属性后的好处
- 过滤后的列表只会在对应数组发生相关变化时才被重新运算，过滤更高效。
- 使用
v-for="item in afterComputed"之后，在渲染的时候遍历元素少了，渲染更高效。 - 解耦渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。
紧密耦合的组件名
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。紧密耦合的组件名
如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。
不建议为了紧密耦合搞目录区分，因为会出现文件名名字相同、IDE侧边栏浏览组件花费时间多的问题。
components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue
自闭合组件
在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。 自闭合组件
<MyComponent/>
<my-component>my-component>
Prop 名大小写
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。 Prop 名大小写
props: {
greetingText: String
}
greeting-text="hi"/>
简单的计算属性
应该把复杂计算属性分割为尽可能多的更简单的 property。 简单的计算属性
好处是易于测试、易于阅读、更好的“拥抱变化”。
单文件组件的顶级元素的顺序
单文件组件应该总是让