专栏首页大前端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 条评论
登录 后参与评论

相关文章

  • Go优秀开源项目推荐

      本文主要是收集Go语言开发的一些优秀项目和框架,个人见识有限肯定还有很多优秀的项目没有收录的,假如大家有好的Go项目可以在文末留言。

    追逐时光者
  • [技术地图] vue-cli

    这是一个新开的’实验性’文章系列,如其名‘技术地图’,这个系列计划剖析一些前端开源项目,可能会探讨这些项目的设计和组织、整理他们使用到技术栈。 首先拿vue-c...

    _sx_
  • 从零到一教你基于vue开发一个组件库

    Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基...

    歪马
  • 从零到一教你基于vue开发一个组件库

    Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基...

    徐小夕
  • 【阅读清单】系列文章清单列表(二)

    动手学深度学习 https://cloud.tencent.com/developer/inventory/1621"

    云加社区
  • .NET Core/.NET5/.NET6 开源项目汇总5:(权限)管理系统项目

    企业管理系统一般包含后台管理UI、组织机构管理、权限管理、日志、数据访问、表单、工作流等常用必备功能。下面收集的几款优秀开源的管理系统,值得大家入门学习。如有新...

    张传宁IT讲堂
  • 微信团队分享:微信直播聊天室单房间1500万在线的消息架构演进之路

    本文由微信开发团队工程师“ kellyliang”原创发表于“微信后台团队”公众号,收录时有修订和改动。

    JackJiang
  • 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助。我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0...

    叙帝利
  • 前端开发的工具化与工程化

    概述 近年来,随着浏览器性能的提升与移动互联网浪潮的汹涌而来,Web前端开发进入了高歌猛进,日新月异的时代。这是最好的时代,我们永远在前行,这也是最坏的时代,无...

    xiangzhihong
  • 我的Github开源项目,从0到20000 Star!

    2018年3月的时候,我在Github上面闲逛,想要找一个业务和技术相结合的项目,但是发现很多项目都是以技术为主,业务都比较简单。于是我产生了自己写一个业务与技...

    macrozheng
  • 前端进阶知识汇总

    年初突然有了个想法,前端也做了几年了,但是很多知识还很零散,应该系统的把知识归纳起来,于是给自己制定了一个计划,决定花大半年的时间整理一下大前端的知识,把他们都...

    蒋鹏飞
  • 世界杯阵型之争的背后,国产开源项目百花争艳 | 码云周刊第 77 期

    码云Gitee
  • 强推!个人和企业都需要的终极跨平台全端解决方案,一次开发全端覆盖

    1.很多中小型企业要快速开发一个产品,这个产品至少需要覆盖平台范围为:iOS、Android、web/H5、微信/支付宝小程序,那么需要的投入的人力成本、时间成...

    腾讯NEXT学位
  • 当前 GitHub 上排名前十的热门 Vue 项目

    Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。通过基础的 24 分栏,迅速简便地...

    疯狂的技术宅
  • Go 语言入门练手项目推荐

    大家好,我是 roseduan,经常看到一些小伙伴学习完 Go 语言的基础知识之后,无法找到合适的练手项目,然后就很迷茫。

    roseduan
  • 开发小哥手把手教你用CEYE,请给他打电话!

    作者:xixijun@知道创宇404实验室 1、CEYE 是什么 CEYE是一个用来检测带外(Out-of-Band)流量的监控平台,如DNS查询和HTTP请求...

    Seebug漏洞平台
  • 大家为啥总是在说React比Vue更实用呢?

    React与Vue作为当下最流行的框架有很多相似之处:同样是基于组件的轻量级框架,同样专注于用户界面的视图层。同样可以用在简单的项目中,也同样可以使用全家桶扩展...

    前端达人
  • 如何写一手漂亮的 Vue

    前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:“90后,你的中年危机已经杀到”。这令我很受触动。显然,这有些夸张了,但就目前这日复一日的庸碌下...

    晚晴幽草轩轩主
  • 前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点,前端性能优化与可用性保障

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊

扫码关注云+社区

领取腾讯云代金券