简介
功能：项目功能
作用：项目作用
安装和配置
操作工具：Node.js, git，npm，HBuilderX，微信开发者工具
操作技术：Vue，Js，Scss，Ucharts
步骤1：环境搭建
安装Node.js： Node.js
安装git： Git
申请gitee 账号： 登录 - Gitee.com
安装HBuilderX： HBuilderX-高效极客技巧
安装 Vue-cli
创建 uni-app项目
步骤2：打开HBuilder X并点击文件》新建》项目
因为 uniapp 对于 scss 优化好，所以目前样式使用 scss处理
请求封装https://blog.csdn.net/weixin_59727199/article/details/132227829?spm=1001.2014.3001.5501请求封装，在utils文件夹下，需要在 mian.js 暴露出来
目前通过判断本地缓存中 openId 是否存在，来判断用户是否登陆
i mport api from 'utils/request.js'
Vue.prototype.api = api
之后在所需调用接口处
let data = {
}
this.api.get/post('路径'，data)。then((res)=>{
})
步骤3：命名规范
项目命名规范
全部采用小驼峰的方式
// 正确命名：
debugSystemFront
// 错误命名：
debug-system-front目录命名
全部采用小写的方式
以下划线命名
复数时，要采用复数结构
// 正确命名：
scripts / styles / utils / demo-scriptsJS、CSS、SCSS、HTML、PNG等文件命名
全部采用小写的方式
以下划线命名；
// 正确命名：
icon_item
// 错误命名：
icon-item组件命名首字母一定要大写，若无插槽传递子组件情况下建议单标签闭合
// 正确:
<Icon
:class="icon"
/>
// 错误:
<icon
:class="icon"
>
</icon>common 中 css 文件夹中，以对应 .vue文件名来起 common -->> css -->> 文件名 -->> 文件名.scss
命名严谨性
严禁使用 拼音和中文混合的方式
严禁使用中文、中文拼音
正确使用 英文拼写和语法
尽量使用英文单词，单词过长的时候可以使用简写
一些特殊的词语可以采用国际通用的名称
如：河南=henan / 人民币=rmb
// 正确命名：
work(工单)
// 错误命名：
gongdan(工单) gd(工单)步骤4：HTML规范
缩进
推荐一个tab 使用四个空格，嵌套的节点应该缩进
分块注释
推荐一个tab 使用四个空格，嵌套的节点应该缩进
<!-- 英文 中文 start -->
<!-- 英文 中文 end -->
<!-- header 头部 start -->
<view>
<view> </view>
</view>
<!-- header 头部 end -->引号
使用双引号" " 而不是单引号''
每个标签元素包含三个以上的属性需要换行编写
// 正确
<input
type="text"
placeholder="请输入"
v-model="search_value"
size="samall"
/>
// 错误
<input type="text" placeholder="请输入" v-model="search_value" size="samall" />步骤5：Scss规范
命名
类名单个使用小写字母，多单词用下划线分割
.banner { ... }
.banner_item { ... }
id 使用 小驼峰式命名
scss中的变量、函数、混合、placeholder采用单个使用小写字母，多单词用横线分割
class 的命名不要使用 标签名
如：.image .view选择器
// 不推荐：
.content .title { ... }
// 推荐：
.content > .title { ... }尽量使用缩写的属性
展开式属性写法并不会帮助我们清空所有相关其他属性，从而干扰到我们想要达到的效果
// 不推荐：
border-style: solid;
border-width: 1px;
border-color: red;
// 推荐：
border: 1px solid red;每个选择器及属性独占一行
独占一行主要不利于git生成有效的 diff，不能快速使用快捷键注释
// 不推荐：
img {
width: 100%;box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}
// 推荐：
img {
width: 100%;
box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}省略 0 后面的单位
省略会减小CSS文件，对带宽优化有帮助。但特殊设备或适配多设备可以预留单位方便把握值的数量级
border-width: 0;避免使用 ID 选择器及全局标签污染全局样式
页面中的该元素无法重用，id选择器样式权重更大导致为了要重载一个优先级很高的规则，必须给它设置添加再高的优先级（如! important）造成样式权重越来越高的恶性循环。能不用id选择器就不要使用id选择器，避免不是禁止
尽量避免写内联样式
内联样式只能作用于单个标签，不可重复使用造成过多的冗余代码，并且内联样式每次请求页面都会重新渲染，过多内联样式降低加载速度
// 好例子
<input
style="width:100px; height:100px"
/>
// 反例
<view style="width:100px; height:100px" >
<input
style="width:100px; height:100px"
/>
</view>步骤6：Scss
1. 属性的单位尽量写 rpx
2. 宽度 100%尽量写成 750rpx
3. 避免嵌套等级过多，将嵌套深度限制在 4 级，否则后代选择器会增加样式权重，造成样式权重越来越高的恶性循环
// 不推荐：
.main {
.title {
.name {
color: #fff;
}
}
}
// 推荐：
.main-title {
.name {
color: #fff;
}
}步骤7：Js
命名
方法名 必须是 动词 或者 动词+名词 形式
增删改查：
add / delete / update / get
详情：
detail
// 函数常用方法的动词：
get 获取 / set 设置 / add 增加 / remove 删除
create 创建 / destory 移除 / start 启动 / stop 停止
open 打开 / close 关闭 / read 读取 / write 写入
load 载入 / save 保存 / begin 开始 / end 结束
backup 备份 / restore 恢复 / import 导入 / export 导出
split 分割 / merge 合并 / inject 注入 / extract 提取字符串
统一使用单引号''，不使用双引号""，这对创建HTML字符串非常有好处
let str = 'foo';
let testDiv = '<div id="test"></div>'对象声明
使用字面量创建对象
// 推荐：
let user = [];
// 不推荐：
let user = new Object();
// 使用字面量来代替对象构建器
// 推荐：
let user = {
age: 0
}
// 不推荐：
let user = new Object();
user.age = 0;优先使用 ES6 语法
undefined判断
不要直接使用undefined进行变量判断；使用typeof 和字符串 'undefined'对变量进行判断
推荐：
if (typeof person === 'undefined') {
...
}
不推荐：
if (person === undefined) {
...
}
// 空数组（[]）和空对象（{}）对应的布尔值，都是true。条件判断和循环最多三层
条件判断能使用 三目运算符 和 逻辑运算符的，就不要使用条件判断。
如果超过三层的 ，抽成函数，并写清楚注释
if(type == 1){
// to do ...
} else if (type == 2) {
// to do ...
} else if (type == 3) {
// to do ...
} else if (type == 4) {
// to do ...
}
// 过多条件判断建议改用switch方法，switch比if性能更好并且比较时使用是全等操作符，不会发生类型转换的损耗
switch(a) {
case 1: ;break;
case 2: ;break;
case 3: ;break;
case 4: ;break;
case 5: ;break;
default : ;
}this的转换命名
对上下文 this的引用只能使用 _this, that，self来命名
let self = this;
结构清晰
异步执行时采用promise, async awaite 方式.尽量不出现函数多层嵌套;
单一性:一个函数做一件事,保证结构清晰
可复用性
具有相同功能且样式一样或者功能样相同样式上有稍微不同的模块进行组件封装，达到组件复用效果。避免冗余代码，便于维护。
变量声明key与value值之间增加一个空格
// 好例子
data(){
return {
obj: {
key: value,
}
}
}
// 反例
data(){
return{
obj:{
key:value,
}
}
}文件分类管理
通用组件请放在components文件夹下，并且非全局使用的组件请按需引入，不要在main.js里面进行全局引入。便于区别组件与页面的管理，合理进行组件的封装以及重用，优化页面加载效率
main.js文件建议将全局通用的组件、样式、方法在这里引用，非全局的一律按需引入
推荐理由：优化加载效率，做到按需加载资源
步骤8：VUE规范
官方地址：https://cn.vuejs.org/v2/style-guide/文章来源地址https://www.toymoban.com/news/detail-775185.html
总是使用key配合v-for
避免v-if和v-for同时用在同一元素上
每个页面或者组件的顶层父级需要添加一个唯一的类名，并为组件样式设置作用域
设置一致的作用域会确保你的样式只会运用在它们想要作用的组件上，避免造成样式的全局污染以及便于后期的维护。
// 反例
<style>
.btn-close {
background-color: red;
}
</style>
// 好例子
<template>
<view class="menu-header">
</view>
</template>
<!-- 使用 `scoped` attribute -->
<style scoped>
.button {}
</style>
<!-- 使用 CSS Modules -->
<template>
<button :class="[$style.button]">X</button>
</template>
<style module>
.button {}
</style>
<!-- 使用 BEM 约定 -->
<template>
<button class="c-Button">X</button>
</template>
<style>
.c-Button {}
</style>script 标签内部结构顺序
components > props > data > computed > watch > filter > 钩子函数（钩子函数按其执行顺序） > methods
步骤9：项目目录结构
项目文件夹
---- common 主要放置自定义公用 js，scss文件
---- css
---- 文件名
---- .scss pages中对应文件名的 .vue页面的scss
---- variable.scss 自定义变量
---- common.scss 自定义公共类
---- .scss pages中通用的一些scss
---- js 功能性 js文件
---- components 页面公用组件
---- pages .vue页面文件
---- static 放置静态图片
---- uni_modeules HBuilderX 应用市场导入的插件
---- unpackage 运行代码自动生成
---- utils 工具类文件夹
---- manifest.json 配置应用名称、appid、logo、版本等打包信息
---- config.js 用于配置请求地址前缀的
---- pages.json 配置文件
---- .gitignore git 上传的忽略文件
---- uni.scss uni 官方自带的 scss
---- main.js Vue初始化入口文件
---- App.vue 应用配置，用来定义应用的全局样式及事件
文章来源：https://www.toymoban.com/news/detail-775185.html
到了这里，关于前端开发规范文档的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
