摘要：项目结构公共资源公共资源全局样式公共组件布局模拟数据项目模块模块模块页面模块路由插件公共路由全局状态公共方法主视图主程设置静态资源配置文件开发规范语义化命名使用驼峰式命名，文件命名不宜过长，路由的命名和文件命名保持一致。
背景
由于saas平台即将开始，现在重新梳理前端架构和开发规范，项目使用模块化思想搭建，每个模块都有自己都路由和方法，尽量做到删除和添加模块，不会对框架产生较大对影响。
技术栈本次项目继续沿用vue框架和element-ui，以及其它一些插件。
主要：
vue 2.5.0 webapck 4.0.0 element-ui vuex axios
本次项目使用脚手架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 中的属性声明要明确类型
// incorrect
export default {
props: ["node", "size"]
}
// correct
export 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
}
};
参考和引用地址：
腾讯规范文档：http://alloyteam.github.io/Co...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99096.html
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：一前言本文主要针对编辑器是的项目进行代码规范。因此对进行语法检查的工具应运而生，目前使用最为广泛。这篇将讲解如何将集成到我们的项目中。七总结在项目上使用实际上还算相对简单的，但是对于什么都是半生半熟的知识技能的人来说还是花了点时间。 一、前言 本文主要针对编辑器是sublime的vue项目进行eslint代码规范。 Javascript 是一门弱类型语言，所以语法检查变得尤为重要。虽然...
摘要：把打包的目录修改成生产环境需要的目录。是域名的配置只要统一配置一项即可，方便。旨在增强团队开发协作提高代码质量和打造开发基石的编码规范，以下规范是团队基本约定的内容，必须严格遵循。 Vue作为前端三大框架之一，其已经悄然成为主流，学会用vue相关技术来开发项目会相当轻松。 对于还没学习或者还没用过vue的初学者，基础知识这里不作详解，推荐先去相关官网，学习一下vue相关的基础知识。 a...
摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。 初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架 我通常使用 cli 生成项目骨架再在之基础上进行个人修改。 什么是 CLI 命令行界面（英语：command-li...
阅读 2525·2021-11-22 13:54
阅读 2498·2021-10-14 09:42
阅读 3701·2021-09-28 09:47
阅读 1925·2021-09-03 10:28
阅读 1027·2021-07-26 23:38
阅读 2368·2019-08-30 15:54
阅读 2526·2019-08-29 16:35
阅读 1274·2019-08-29 15:42
