脚本宝典收集整理的这篇文章主要介绍了vue开发规范,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
由于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 组件
5.细节
Props 中的属性声明要明确类型
// incorrect
export default {
props: ['node', 'size']
}
// correct
export default {
props: {
node: Object, // 对象
size: [String, Number], // 两种类型都可以
}
}
每块代码快尽量加上注释
<!-- 正确的示范 -->
<template>
<div>
<!-- Header -->
<div class="header">...</div>
<!-- User table -->
<div>
<el-table>...</el-table>
</div>
<!-- Add user dialog -->
<div class="dialog">
<el-dialog title="新增用户">...</el-dialog>
</div>
</div>
</template>
/**
*@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...
以上是脚本宝典为你收集整理的vue开发规范全部内容,希望文章能够帮你解决vue开发规范所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。