专栏首页大前端666Vue实战系列—从目录结构谈可扩展架构设计(1)
原创

Vue实战系列—从目录结构谈可扩展架构设计(1)

很多人都会用项目脚手架,也会跑hello world,然后再写写简单的todolist。但是再往下深入就难了。比如很多教程和老师都会说,大家要多问一个为什么。其实问你妹啊。我都不知道问为什么怎么多问?!

如果我不说,会有多少人去思考和研究为什么vue的项目目录要如此设计,以及这么做好处。

先不说说别的,我们先看看vue的目录,一图抵万言,不墨迹。

好的项目代码结构会大大提升项目的维护性和可扩展性。同时我们可以提供友好的说明,以便其他成员理解项目和快速定位。

其实有一点比较重要,就是公共组件、工具等同类的文件,放置一起维护会比较好。而且还有个小 技巧,我们可以在搭建项目的时候,在 README.md 里面描述下该项目下的代码和文件结构。

多说无益,我这里直接给大家一个示意图,大家可以按照我给的这个项目结构组织项目。

这里强调两点:

1.第一点注意每一个组件的大小写。

2.注意每个组件所用到的图片的位置。

很多人写组件的时候被命名或者大小写或者分隔符弄的晕头转向,这里我就说说代码规范。

代码规范其实是团队合作中最重要的地方,使用相同的代码规范,会大大减少我们接手别人代码时候卧槽的次数。

好的写码习惯很重要,命名习惯、适当的注释,会对代码的可读性有很大的提升。但是习惯是每个人都不一样,所以在此之上,我们需要有这样统一的代码规范。

一些工具可以很好地协助我们,像 Eslint、Tslint等,加上代码的打包工具协助,可以把一些规范强行标准化,来获取代码的统一性。还有像 prettier 这样的工具,能自动在打包的时候帮我们进行代码规范化。

除了这些简单的什么驼峰啊、全等啊、单引双引等基础的规范,其实更重要的是流程规范。最基础的是改动公共库或是公共组件的时候,需要进行 code review。通常我们使用 Git 维护代码,这样在合并或是版本控制上有更好的体验。

但其实最重要的还是沟通,沟通是一个团队里必不可少同时很容易出问题的地方,要学会沟通方式、表达方式。

很多人觉得命名了或者项目目录了这些不重要,非得把复杂的功能实现出来才牛逼,这才是技术大牛或者脑袋上闪耀着光环的架构师的范儿。其实,项目的维护所有程序员都需要,而且要想成为一个架构师,你写的代码别人是否能看得,用着舒服,架构是否健壮可扩展,这些是基本功。你连文件目录都设计不好,我拿什么相信你能设计出来可扩展的程序?

本系列内容可以让你的Vue技术有节奏的提高。

从Vue基础开始,循序渐进,含有常用实战项目,贴近企业真实现状。

让大家全面理解Vue的实现原理,掌握实用技巧,能在实战中使用Vue,解锁一个开发技能。

内容:Vue基础概念 + 常用实战训练 + 必要操作

入门:

  • Vue基础语法
  • Vue实例与前端组件化
  • 组件间基础传值
  • Vuex实际应用
  • 插槽的实用技巧
  • 动画效果与动画原理

实战:

  • Vue实战预热
  • 商品列表页面开发
  • 评论页面开发
  • 商家信息页面开发
  • 购物车页面开发
  • 联调与上线
  • 项目联调
  • 真机测试
  • 打包上线

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue实战系列—项目搭建四步曲(0)

    开篇:想通过输出Vue系列文章,让大家全面理解Vue的实现原理,掌握实用技巧,能在实战中使用Vue,解锁一个开发技能。

    前端大彬哥
  • Gatsby入门指南—使用GraphQL解析Markdown(2)

    这里是所有数据,传到了TitleAndDescription组件里,react组件数据传递,我这么就为了看着舒服一点。

    前端大彬哥
  • Vue实战系列—评价组件的设计与实现(6)

    针对组件引用的图片可能产生变动性,我们将组件内的图片放入组件文件夹内,进行引用。使得组件更加便于维护。

    前端大彬哥
  • 21个令程序员泪流满面的瞬间

    数据派THU
  • 支招 | 手把手教你应对这15种“烂代码”

    你已经在某个项目的一部分中拖延了很久。推迟了一周以后,今天是你计划打开遗留代码库并查看已完成的内容的时候。你一想到这代码库就害怕。因为你知道离岸软件开发团队已经...

    AI研习社
  • 为什么vjudge上他人公开的代码要以图片形式显示?

    vjudge用图片来显示代码,应该是为了避免抄袭。在较低水平的oier中,已经有交别人的代码来通过题目的风气。举个例子,洛谷上抄袭代码情况极其严重,而u...

    ACM算法日常
  • 手把手教你应对这15种“烂代码”

    你已经在某个项目的一部分中拖延了很久。推迟了一周以后,今天是你计划打开遗留代码库并查看已完成的内容的时候。你一想到这代码库就害怕。因为你知道离岸软件开发团队已经...

    昱良
  • 手把手教你应对这 15 种“烂代码”

    推迟了一周以后,今天是你计划打开遗留代码库并查看已完成的内容的时候。你一想到这代码库就害怕。

    良月柒
  • 让团队保持Code Review习惯的三大法宝

    之前跟大家聊过代码审查,想要在团队中保持团队代码审查习惯,是相当困难的. 我们必须要有合理的流程,工具与制度的支持,才能基本保证我们代码审查效率与质量.

    前端博客 : alili.tech
  • Android Studio 设置代码提示和代码自动补全快捷键方式

    想必使用过Eclipse的小伙伴们都习惯Eclipse快捷键带来的方便,但是当我们使用Android studio来进行开发的时候也想要这种方便该怎么办呢,当然...

    砸漏

扫码关注云+社区

领取腾讯云代金券