企业网站优化与推广,内蒙古建设工程造价信息网官网,网站做的好看术语,论文网站建设目标生产级别的 vue 拆分组件的标识更好的组织你的目录如何解决 props-base 设计的问题transparent component #xff08;透明组件#xff09;可减缓上述问题provide 和 inject vue-meta 在路由中的使用如何确保用户导航到某个路由自己都重新渲染#xff1f;测试最佳实践如何制… 生产级别的 vue 拆分组件的标识更好的组织你的目录如何解决 props-base 设计的问题transparent component 透明组件可减缓上述问题provide 和 inject vue-meta 在路由中的使用如何确保用户导航到某个路由自己都重新渲染测试最佳实践如何制定团队的最佳实践 --- 规范可访问性vue 代码最佳实践总结 花了 3 个小时听了 front master 的
Production-Grade Vue.js 课程课程不错比较基础但是也学到了一些东西现在总结如下。 拆分组件的标识
哪种情况下拆分组件有时候往往没有一个清晰的边界以下几种情况需要拆分组件 发现组件难以阅读 难以简洁明确的描述组件职责
单一职责是软件设计的黄金法则。
组件内单独一段代码具有自己的状态
组件内有一个状态不和其他状态产生关联可拆分成单独组件让组件更加清晰。
更好的组织你的目录
目录嵌套太深不利于重构和浏览文件。
课程里推荐两层的目录从命名上把相关的文件组织到一起比如
srrcomponentsDashboardHeader.vueDashboardHeader.test.jsDashboard.test.jsDashboard.vue这样命名组件被 vscode 聚拢到一起方便阅读。
但是实际上命名一直是很多人难题很多人也不愿意花点时间思考命名所以我更推荐最多三层目录把相关组件组织到单独目录下使用 index 导出变量
srrcomponentsDashboard # 文件夹大写DashboardHeader.vueDashboardHeader.test.jsDashboard.test.jsDashboard.vueindex.js # 导出相关变量或者
srrcomponentsDashboard # 文件夹大写Header.vueHeader.test.jsDashboard.test.jsDashboard.vueindex.js # 导出相关变量如何解决 props-base 设计的问题
props-base 设计方法面对简单的功能时可胜任但是所有组件的功能都通过 props 来实现props 就会变得很多或者层层传递 props造成 props 钻井。
具体来说props-base 设计有这些问题 新功能会增加复杂性 职责不单一 在模板中会出现大量v-if 难以扩展 难以维护 难以使用
transparent component 透明组件可减缓上述问题
templatedivinput typetext v-on$listeners v-bind{...$attrs,...$props} //div
/template
scriptexport default {inheritAttrs: false,}
/script通过 v-on$listeners 和 v-bind{...$attrs,...$props} 可绑定多个事件和多个值。 provide 和 inject
通过 provide 和 inject 可轻松在跨级组件之间共享数据减缓 props 钻井问题。 provide 和 inject 在 vue 插件中才能发挥其巨大威力在业务项目中使用多了会导致数据来源不清楚应该少用。 vue-meta 在路由中的使用
这个网站的 seo 有关感觉不够实用。
如何确保用户导航到某个路由自己都重新渲染
router-view :key$route.fullPath /测试最佳实践 不测 vue比如测试生命周期函数的调用 使用生成器生成模板代码比如plop.js
如何制定团队的最佳实践 — 规范
选择最佳实践
没有时间讨论最佳实践或者不知道有哪些最佳实践就直接选择一个社区的规范。
实现最佳实践
配置 lint prettier 等工具让规范自动约束开发者的行为。
linter — styleLint eslint markdownlint
formatter — prettier
代码模板生产成— plop
编辑器设置 — .vscode
如何执行规范
保证你的情绪稳定、不要责怪他人、找到系统的解决方案有能力就要保护你的成员
可访问性
eslint-plugin-a11y可帮助检查。
vue 代码最佳实践
Vue Styleguidist
这个有点繁琐了进度不允许写这么多注释。
总结
这个课程没有想象中的好只推荐 vue 使用经验只有 2 年内的前端学习。
