簡介
功能：項目功能
作用：項目作用
安裝和配置
操作工具：Node.js, git，npm，HBuilderX，微信開發(fā)者工具
操作技術：Vue，Js，Scss，Ucharts
步驟1：環(huán)境搭建
安裝Node.js：???? Node.js
安裝git：? ? ? ? ? ?? Git
申請gitee 賬號： 登錄 - Gitee.com
安裝HBuilderX：? HBuilderX-高效極客技巧
安裝 Vue-cli
創(chuàng)建 uni-app項目
步驟2：打開HBuilder X并點擊文件》新建》項目
因為?uniapp?對于?scss?優(yōu)化好，所以目前樣式使用?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
之后在所需調(diào)用接口處
let?data?=?{
}
this.api.get/post('路徑'，data)。then((res)=>{
})
步驟3：命名規(guī)范
項目命名規(guī)范
全部采用小駝峰的方式
// 正確命名：
debugSystemFront
// 錯誤命名：
debug-system-front目錄命名
全部采用小寫的方式
以下劃線命名
復數(shù)時，要采用復數(shù)結構
// 正確命名：
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規(guī)范
縮進
推薦一個tab 使用四個空格，嵌套的節(jié)點應該縮進
分塊注釋
推薦一個tab 使用四個空格，嵌套的節(jié)點應該縮進
<!-- 英文 中文 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規(guī)范
命名
類名單個使用小寫字母，多單詞用下劃線分割
.banner { ... }
.banner_item { ... }
id 使用 小駝峰式命名
scss中的變量、函數(shù)、混合、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文件，對帶寬優(yōu)化有幫助。但特殊設備或適配多設備可以預留單位方便把握值的數(shù)量級
border-width: 0;避免使用 ID 選擇器及全局標簽污染全局樣式
頁面中的該元素無法重用，id選擇器樣式權重更大導致為了要重載一個優(yōu)先級很高的規(guī)則，必須給它設置添加再高的優(yōu)先級（如! important）造成樣式權重越來越高的惡性循環(huán)。能不用id選擇器就不要使用id選擇器，避免不是禁止
盡量避免寫內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式只能作用于單個標簽，不可重復使用造成過多的冗余代碼，并且內(nèi)聯(lián)樣式每次請求頁面都會重新渲染，過多內(nèi)聯(lián)樣式降低加載速度
// 好例子
<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 級，否則后代選擇器會增加樣式權重，造成樣式權重越來越高的惡性循環(huán)
// 不推薦：
.main {
.title {
.name {
color: #fff;
}
}
}
// 推薦：
.main-title {
.name {
color: #fff;
}
}步驟7：Js
命名
方法名 必須是 動詞 或者 動詞+名詞 形式
增刪改查：
add / delete / update / get
詳情：
detail
// 函數(shù)常用方法的動詞：
get 獲取 / set 設置 / add 增加 / remove 刪除
create 創(chuàng)建 / destory 移除 / start 啟動 / stop 停止
open 打開 / close 關閉 / read 讀取 / write 寫入
load 載入 / save 保存 / begin 開始 / end 結束
backup 備份 / restore 恢復 / import 導入 / export 導出
split 分割 / merge 合并 / inject 注入 / extract 提取字符串
統(tǒng)一使用單引號''，不使用雙引號""，這對創(chuàng)建HTML字符串非常有好處
let str = 'foo';
let testDiv = '<div id="test"></div>'對象聲明
使用字面量創(chuàng)建對象
// 推薦：
let user = [];
// 不推薦：
let user = new Object();
// 使用字面量來代替對象構建器
// 推薦：
let user = {
age: 0
}
// 不推薦：
let user = new Object();
user.age = 0;優(yōu)先使用?ES6?語法
undefined判斷
不要直接使用undefined進行變量判斷；使用typeof 和字符串 'undefined'對變量進行判斷
推薦：
if (typeof person === 'undefined') {
...
}
不推薦：
if (person === undefined) {
...
}
// 空數(shù)組（[]）和空對象（{}）對應的布爾值，都是true。條件判斷和循環(huán)最多三層
條件判斷能使用 三目運算符 和 邏輯運算符的，就不要使用條件判斷。
如果超過三層的 ，抽成函數(shù)，并寫清楚注釋
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性能更好并且比較時使用是全等操作符，不會發(fā)生類型轉換的損耗
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;
結構清晰
異步執(zhí)行時采用promise, async awaite 方式.盡量不出現(xiàn)函數(shù)多層嵌套;
單一性:一個函數(shù)做一件事,保證結構清晰
可復用性
具有相同功能且樣式一樣或者功能樣相同樣式上有稍微不同的模塊進行組件封裝，達到組件復用效果。避免冗余代碼，便于維護。
?變量聲明key與value值之間增加一個空格
// 好例子
data(){
return {
obj: {
key: value,
}
}
}
// 反例
data(){
return{
obj:{
key:value,
}
}
}?文件分類管理
通用組件請放在components文件夾下，并且非全局使用的組件請按需引入，不要在main.js里面進行全局引入。便于區(qū)別組件與頁面的管理，合理進行組件的封裝以及重用，優(yōu)化頁面加載效率
?main.js文件建議將全局通用的組件、樣式、方法在這里引用，非全局的一律按需引入
推薦理由：優(yōu)化加載效率，做到按需加載資源
步驟8：VUE規(guī)范
官方地址：https://cn.vuejs.org/v2/style-guide/文章來源地址http://www.zghlxwxcb.cn/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 標簽內(nèi)部結構順序
components > props > data > computed > watch > filter > 鉤子函數(shù)（鉤子函數(shù)按其執(zhí)行順序） > methods
步驟9：項目目錄結構
項目文件夾
---- common 主要放置自定義公用 js，scss文件
---- css
---- 文件名
---- .scss pages中對應文件名的 .vue頁面的scss
---- variable.scss 自定義變量
---- common.scss 自定義公共類
---- .scss pages中通用的一些scss
---- js 功能性 js文件
---- components 頁面公用組件
---- pages .vue頁面文件
---- static 放置靜態(tài)圖片
---- uni_modeules HBuilderX 應用市場導入的插件
---- unpackage 運行代碼自動生成
---- utils 工具類文件夾
---- manifest.json 配置應用名稱、appid、logo、版本等打包信息
---- config.js 用于配置請求地址前綴的
---- pages.json 配置文件
---- .gitignore git 上傳的忽略文件
---- uni.scss uni 官方自帶的 scss
---- main.js Vue初始化入口文件
---- App.vue 應用配置，用來定義應用的全局樣式及事件
文章來源：http://www.zghlxwxcb.cn/news/detail-775185.html
到了這里，關于前端開發(fā)規(guī)范文檔的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
