5. 推荐开发方式
vue和react一样,可以组件化,所以推荐组件化开发的方式。
组件系统是 Vue 的一个重要概念,允许我们使用小型、独立和通常可复用的组件构建大型应用。
参考vue官网,组件化 :https://cn.vuejs.org/v2/guide/components.html
项目举例:比如一个h5的首页,可以分为标题组件,业务实时组件,关键指标组件,tab切换组件。这几个组件的几乎没有联系,可以相互独立。
当然你也可以再划分成小组件,相同的模块抽成公共的小组件,这样子达到代码重用的目的更好。比如首页里面大模块的 title 。
6. 项目用vuex 的讲解
本项目vuex的用法 和官方的有点不一样,所以这里有必要做一下讲解。
1. 保存值 mutations
1. 要用store来存储值,都要先定义
比如:新增里面要存储关于 日 月 类型的切换:tabActiveType: '',
要先在store模块的add里面的initPageState 先定义,不然找不到,为取值会为undefined。
2. 定义type,至于为什么要大写?因为当作常量来用,当然不大写也可以,不过本项目要统一成大写。
3. mutatuons 写一个方法来保存值
4. 调用保存值,这里的 SAVE_TAB_ACTIVE_TYPE 要与定义在第2中 type 里面的对应,而且 对象里的 key 要与initPageState里面定义的对应,如 tabActiveType。
5. 当然怎么取值?只需要在组件的computed勾子像下面这样子写即可。
按照这5步,一个关于vuex的取值与偘保存值就ok了!
2.那怎么异步action呢?
1. 定义type,和上面的第二步一样
2. 在相应模块的 actions 里定义一个方法,如下图:
这样子可以获取异步请求数据,并保存在store里面了。
3. 当然调用?只需要在组件的方法或者勾子里面,像下面这样子调用即可。
四、开发规范
1.代码规范
结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而制定。
旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范,
以下规范是团队基本约定的内容,必须严格遵循。
规范链接:
参考 腾讯和京东的前端代码规范
腾讯的 http://tgideas.qq.com/doc/index.html
京东的 https://guide.aotu.io/index.html
2. 统一编辑器--vsCode 全称 Visual Studio Code
Visual Studio Code 是微软推出的跨平台编辑器。它采用经典的VS的UI布局,功能强大,扩展性很强。
这个编辑器流畅简洁,自从用了这个编辑器,其他的都不想了,只想静静地敲代码了。
Microsoft Visual Studio Code 中文手册 https://jeasonstudio.gitbooks.io/vscode-cn-doc/content/
统一格式化代码插件-- Vetur 一个关于vue代码格式化
vue代码统一格式化可以减少代码风格差异
而且这个插件配置一下更好用:
`
"vetur.format.defaultFormatter.js": "vscode-typescript",
`
不然有些地方会出现换行,代码难懂了。像下面这样:
3. 推荐皮肤插件--Boxxy Theme Kit
其中的代码颜色:Boxy Ocean 是很好看的代码风格
用上之后不满意 ?哼,那本汪就不高兴了,本汪不负责!