项目架构优化

[chiyan-lin]

项目架构优化

项目目录

• shared
  • components
  • common
  • filters
  • mixins
  • ...
• views
  • App
    • index.vue
    • components
    • img

如果有路由

• router
• layouts
  • App
• views
  • ViewA
  • ViewB

组件目录结构

• index.vue
• components
• img

图片和组件放在同一个目录，方便挪腾

组件拆分，原子化

重复使用的图片，就为它创建一个组件

样式

页面样式放到 App/index.vue 下，不用单独 import scss 文件。

使用 css module，状态使用 data- 属性。

使用 :lang() & 做多语言适配。

ES 模块

不使用 export default，https://jkchao.github.io/typescript-book-chinese/tips/avoidExportDefault.html

组件通信

简单 bus 使用 this.$root 代替（
https://flaviocopes.com/vue-components-communication/
）
，复杂还是老实 vuex

组件状态

组件尽量用 props，把 data 提升到父组件，参考 react 的状态提升
https://zh-hans.reactjs.org/docs/lifting-state-up.html

组件划分

灵活用 slot 组合组件，不用多层传 props，参考
https://zh-hans.reactjs.org/docs/composition-vs-inheritance.html

Vue 高效开发之路

https://mlog.club/article/26084

https://ke.qq.com/course/436773?taid=3699839448033829

[chiyan-lin]

typescript 学习

不只是简单的声明变量类型、函数类型就算是掌握了 ts，其中的类型系统发展到今天已经非常具有深度，所以建议大家在使用 ts 的同时，也可以掌握更多技巧

《深入理解Typescript》

列举了很多具体的使用例子，和一些建议

工具类型 (Utility Types)

工具类型可以很多场景下简化和辅助类型声明，查看其声明的实现也十分有助于掌握更多类型声明的技巧

分为 内置工具类型 和 第三方工具类型