开发工具使用
1.建议使用统一开发工具vscode
2.vue项目必须使用eslint，并且保证每次代码提交没有lint错误
3.vscode使用插件
- Bracket Pair Colorizer - 彩虹括号，不同嵌套级别的括号不同的颜色
- GitLens - 显示每行代码编写人以及时间，方便共同开发git做代码管理
- Vetur - 语法高亮、智能感知、Emmet等
- EsLint - 语法纠错
- Auto Close Tag - 自动闭合HTML/XML标签
命名规范
- 1.取名尽量贴合语意 （使用翻译软件翻译下）
- 2.组件和构造函数使用大驼峰，常量使用大写，变量名、方法名、文件名等使用小驼峰
// 组件
import NavTitle from '@/components/NavTitle'
<NavTitle/>
// 构造函数
class Person {}
// 常量
const MAX_COUNT = 10
// 方法
function getCount() {}
// 变量
let maxCount = max + 1
html/css代码编写规范
- 1.使用语义化标签如section footer header 进行布局页面结构
- 2.少写行内样式，尽量用内嵌样式，保持代码简洁分明
- 3.禁止滥用绝对定位，只在有必要的时候才使用绝对定位
移动端样式书写规范
- 尽可能使用以屏幕宽度为参照的等比例布局 以js根据屏幕宽度动态计算根元素font-size 变换 rem 与 px 换算比例，做到等比缩放
- 定义 viewport 为移动端设备优化，设置可见区域的宽度和初始缩放比例,禁止用户手动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
js代码编写规范
- 1.函数/方法，必须要添加功能注释
- 2.函数/方法要保持功能单一，一个方法只做一件事情，复杂的功能要进行拆分；相同的功能代码进行合并，保证代码简洁
- 3.来自于接口返回的数据，和来自于本地存储的数据使用之前要做容错处理，防止前端页面崩掉（对数据判空或者try...catch）
if (res && res.data) {
this.tableData = res.data
} else {
this.tableData = []
}
- 4.该用switch 的时候用switch，滥用if/else会使程序的可读性变差
vue 项目目录结构
src
|—— api 接口定义目录 （http.js定义axios封装和公共路径配置；api.js定义每个接口）
|—— assets 静态文件目录
|—— components 公共组件目录 （可将查询，表格，分页或者布局类的组件封装为公共组件）
|—— const 常量目录 （filter.js过滤器、固定不经常改的常量）
|—— utils 工具库目录 （时间日期处理方法datetime.js；拦截器以及其他的公用方法）
|—— pages/views 页面目录
|—— router 路由定义目录
|—— store vuex状态管理定义目录
|—— styles 样式目录
小程序目录结构
|—— api 接口定义目录 （api统一管理每个接口）
|—— assets 静态文件目录
|—— components 公共组件目录 （可将查询，表格，分页或者布局类的组件封装为公共组件）
|—— const 常量目录 （filter.js过滤器、固定不经常改的常量）
|—— pages 页面目录
|—— utils 工具库目录 （时间日期处理方法datetime.js；拦截器以及其他的公用方法）
|—— app.js 小程序逻辑
|—— app.json 小程序公共配置
|—— app.wxss 小程序公共样式表
|—— project.config.json 工具配置
|—— siteMap.json 配置小程序及其页面是否允许被微信索引
网友评论