背景
由于saas平台即将开始,现在重新梳理前端架构和开发规范,项目使用模块化思想搭建,每个模块都有自己都路由和方法,尽量做到删除和添加模块,不会对框架产生较大对影响。
技术栈
本次项目继续沿用vue框架和element-ui,以及其它一些插件。
主要:vue 2.5.0webapck 4.0.0element-uivuexaxios
本次项目使用脚手架vue-cli 3.0 版本,webpack也基于4.0作为基础框架开发,配置变动比较大,但是相比3.0简洁明了了许多。
项目结构
├─ public 公共资源├─ src│ ├─ api 公共api│ ├─ assets 资源│ ├─ └─ styles 全局样式│ ├─ components 公共组件│ ├─ layout 布局│ ├─ mock 模拟数据│ ├─ modular 项目模块│ │ ├─ home │ │ ├─└─ api 模块api│ │ ├─└─ pages 模块页面│ │ ├─└─ router 模块路由│ ├─ plugin 插件│ ├─ router 公共路由│ ├─ store 全局状态│ ├─ utils 公共方法│ ├─ App.vue 主视图│ ├─ main.js 主程│ └─ setting.js 设置├─ static 静态资源├─ .browserslistrc├─ .eslintrc.js├─ .gitignore├─ babel.config.js├─ package.json├─ README.md└─ vue.config.js 配置文件├─ yarn.lock
开发规范
1.语义化命名
- 使用驼峰式命名,文件命名不宜过长,路由的命名和文件命名保持一致。
2.文件目录规范
- 不宜嵌套过多层文件,且不同模块相同文件名应保持一致,区分大小写。
3.路由
-
用户管理下有增改两个功能,不使用弹框去做的前提下,假如说 add 和 update 对应两个路由是 /addUser,/updateUser。我们系统地址栏是这样显示的:
// 增加用户localhost:3030/addUser// 修改用户localhost:3030/updateUser?id=1
但是模块多的话,就不容易区分,其实应该这样做:
// 增加用户localhost:3030/user/add// 修改用户localhost:3030/user/update?id=1
4.Vue 组件
- 关于 Vue 组件开发规范可以参考官方的
- 组件名以单词大写开头驼峰 (PascalCase)
5.细节
- 组件中的字体图标(icon)尽量不要用 png 图片
- 使用两个空格(space)进行缩进
-
Props 中的属性声明要明确类型
// incorrectexport default { props: ['node', 'size']}// correctexport default { props: { node: Object, // 对象 size: [String, Number], // 两种类型都可以 }}
- 为v-for设置键值key,避免 v-if 和 v-for 用在一起使用。
-
每块代码快尽量加上注释
...... ... /** *@desc 改变状态 *@param id [String] 改变对象的id *@param status [String] 改变对象的status *@return config [Object] 配置对象 */changeStatus(id, status) { let self = this return config = { url: api.changeBannerStatus, loading: "loading", param: { banner_position_id: id, status: status } };
参考和引用地址:
腾讯规范文档: