（一）前言及簡介

沒有規矩，不成方圓，對於團隊來講，有一套完整的開發規範能夠減小團隊協做成本和維護成本，讓代碼閱讀起來更容易。css

（二）環境搭建

2.1 安裝依賴

項目中所須要的依賴都會在package.json文件中展現。html

安裝依賴須要使用npm命令，可去npm官方文檔使用及學習。vue

2.1.1 生產環境依賴

生產環境須要的依賴安裝在屬性dependencies之下。node

可使用命令：webpack

npm install xxxx --save 
複製代碼

不可安裝生產環境無需用到的依賴。 git

2.1.2 開發環境依賴

開發環境須要的依賴安裝在屬性devDependencies之下。web

可使用命令：vuex

npm install xxxx --save-dev 
複製代碼

2.2 webpack配置

2.2.1 運行端口

項目開發環境下的運行端口爲：chrome

port: 8082
複製代碼

2.2.2 代理

若是項目中須要使用其餘系統請求，涉及跨域問題，可按照以下修改代理配置。npm

proxy: {
      '/api': {
        target: 'http://xxxx',
        pathRewrite: {'^/api' : ''},// 是否重寫
        changeOrigin: true,     // target是域名的話，須要這個參數，
        secure: false,          // 設置支持https協議的代理
      },
},
複製代碼

（三）項目規範

3.1 項目技術構成

本項目由vue.js技術框架搭建，配合webpack打包。

// 技術版本
vue:4.1.2
webpack:4.0.0
複製代碼

vue.js官方文檔學習及使用。

webpack官方文檔學習及使用。

3.2 項目結構規範

3.2.1 項目結構的核心思想

業務功能模塊的相關代碼都集中在一塊，方便移動和刪除
實現關注點分離，方便開發、調試、維護、編寫、查閱、理解代碼

3.2.2 項目目錄

.
├── vue.config.js/                      # webpack 配置文件；
├── config/                     # 與項目構建相關的經常使用的配置選項；
│   ├── index.js                # 主配置文件
│   ├── dev.env.js              # 開發環境變量
│   ├── prod.env.js             # 生產環境變量
│   └── test.env.js             # 測試環境變量
│
├── src/
│   ├── main.js                 # webpack 的入口文件；
│   ├── assets/                 # 共用的代碼之外的資源，如：圖片、圖標、視頻 等；
│   ├── api/                    # 網絡模塊，如：接口；
│   ├── router/                 # 路由模塊
│   ├── I18n/                   # 國際化模塊
│   ├── pages/                  # 單頁頁面
│   ├── vuex/                   # 組件共享狀態
│   ├── components/             # 共用的組件；； 這裏的存放的組件應該都是展現組件
│   │   ├── base/               # 基本組件，如：共用的彈窗組件，loading加載組件，提示組件。
│   │   ├── common/             # 共用的全局組件，封裝的導航條，底部組件等等
│   │   ├── temp/               # 模板組件，如：相同的頁面封裝成一個組件。
│   │   ├── UItemp/             # UI組件，如：項目中特定的按鈕，消息數字，等等一些樣式能夠封裝成組件的。
│   ├── common/                 # 共用的資源，如：經常使用的圖片、圖標，共用的組件、模塊、樣式，常量文件等等；
│   │   ├── compatible/         # 兼容模塊，如：適合App和微信各類接口的模塊；
│   │   ├── extension/          # 已有類的擴展模塊，如：對 Array 類型進行擴展的模塊；
│   │   ├── libraries/          # 存放本身封裝的或者引用的庫；
│   │   ├── tools/              # 本身封裝的一些工具
│   │   ├── constant.js         # 存放js的常量；
│   │   ├── constant.scss       # 存放scss的常量；
│   │   └── ...
│   └── app/                    # 存放項目業務代碼；
│       ├── App.vue             # app 的根組件；
├── public/                     # 純靜態資源，該目錄下的文件不會被webpack處理，該目錄會被拷貝到輸出目錄下；
├── .babelrc                    # babel 的配置文件
├── .editorconfig               # 編輯器的配置文件；可配置如縮進、空格、製表相似的參數；
├── .eslintrc.js                # eslint 的配置文件
├── .eslintignore               # eslint 的忽略規則
├── .gitignore                  # git的忽略配置文件
├── .postcssrc.js               # postcss 的配置文件
├── CHAGNELOG.md                # 版本更新變動release
├── index.html                  # HTML模板
├── package.json                # npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息
└── README.md                   # 項目信息文檔
複製代碼

3.3 資源命名

3.3.1 目錄命名

能直觀的感覺當前目錄文件的做用
以小駝峯方式命名
特殊縮寫名稱可大寫開頭

│   ├── pages/                 
│   ├── components/
│   │   ├── UItemp/
複製代碼

3.3.2 頁面命名

能直觀的感覺當前文件的做用
以小駝峯方式命名

│   │   │   ├── login.vue       # 登陸頁面
│   │   │   ├── changePhone.vue # 用戶中心-修改電話號碼頁面
複製代碼

3.3.3 組件命名

能直觀的感覺當前組件的用途
組件命名始終是多個單詞的，避免跟html元素或標籤衝突
要麼大寫開頭，要麼始終用橫線連接（這裏項目大寫開頭）

// 反例
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

// 好例子
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
複製代碼

3.3.4 圖片命名

圖片文件夾通常聽從頁面或者模塊命名,如：login/）
圖片不可隨意命名，且嚴禁使用0，1，等數字直接命名圖片。
圖片命名可遵循：用途+描述，多個單詞用下劃線隔開，如：login_icon.png,pwd_icon.png
10k如下圖片建議放置assets/img下（webpack打包時直接轉爲base64嵌入）
大圖且不常更換的圖片放置public/img下
可用css編寫的樣式嚴禁使用圖片
國際化圖片，後綴使用簡體-cn,英文-en,繁體-tw

│   ├── assets/               
│   │   ├── img/                          # 圖片
│   │   │    ├── common/                  # 公共圖片
│   │   │    │    ├── default_avatar.png  # 默認頭像
│   │   │    ├── login/                   # 登陸模塊
│   │   │    │    ├── login1.png          # 登陸模塊圖片
│   │   │    │    ├── login_icon-en.png      
│   │   │    │    ├── login_icon-cn.png     
│   │   │    │    ├── login_icon-tw.png      
│   │   │    ├── userInfo/                   # 用戶中心模塊的圖片
複製代碼

3.4 資源使用

3.4.1 組件使用規範

使用時以v-開頭
命名遵循組件命名規範
推薦使用單標籤閉合

<v-BaseButton :data="data"/>
<script> export default{ components:{ "v-BaseButton":BaseButton } } </srcipt 複製代碼

3.4.2 圖片使用規範

項目下有兩個文件夾放置圖片地址src/assets/img,public/img

webpack打包時會直接copypublic/img下的圖片，因此，當你的圖片放置public/img下時，爲防止圖片打包重複，須要聽從如下寫法：

public/img下的圖片調用時禁止使用require

由於經過require調用的圖片會通過webpack打包，生成hash後綴，同`public/img`下圖片重複

let img1 = require('../public/img/xxxx')//錯誤寫法
let img2 ='../public/img/xxxx'//正確寫法
複製代碼

public/img下的圖片不可直接嵌入img的src中

由於img標籤src中的圖片也會通過webpack打包

<!--錯誤寫法-->
<img src="../public/img/xxx">
<!--正確寫法-->
<img :src="`../public/img/xxx`">
複製代碼

src/assets/img下的圖片必須使用require寫法，不然會報錯找不到圖片

<!--正確寫法-->
<img src="../asset/img/xxx">
<!--錯誤寫法-->
<img :src="`../asset/img/xxx`">
複製代碼

let img1 = require('../asset/img/xxxx')//正確寫法
let img2 ='../asset/img/xxxx'//錯誤寫法
複製代碼

圖片這樣區分，防止圖片重複打包，增長項目體積

3.5 項目路由

3.5.1 路由命名

普通路由(非動態多級)命名，能夠直接使用頁面組件的命名。

{
    path: '/login',
    name: 'login',
    component(resolve) {
        require.ensure(['../pages/login/login.vue'], () => {
            resolve(require('../pages/login/login.vue'));
        });
    }
},
複製代碼

動態多級路由，遵循：用途或做用或功能。

/user/personal/infomaition  用戶中心 -> 我的中心 -> 我的信息
/user/company/infomaition  用戶中心 -> 企業中心 -> 企業信息
複製代碼

3.5.3 多級路由

嵌套不可超過三層。

3.5.4 路由權限

3.5.4.1 登陸權限

通常頁面無需登陸可查看，重要頁面須要登陸權限。

登陸權限字段在路由meta標籤中肯定。

meta: {
    requireAuth: true // 爲true則是須要登陸權限
}
複製代碼

3.5.4.2 管理員權限

管理員擁有的權限：

顯示管理入口，進入後臺管理。
導航結構展現不同。
與普通用戶相同的路徑，會展現不同的內容。

根據不一樣的權限，渲染不一樣的組件或頁面。

（四）編碼規範

4.1 HTML規範

4.1.1 文件編碼

開頭聲明文檔類型
使用語言屬性
- 中文："zh-Hans"
- 簡體中文："zh-cmn-Hans"
- 繁體中文："zh-cmn-Hant"
- 英文："en"
使用不帶BOM的UTF-8編碼
在HTML中指定編碼<meta charset="utf-8">
SEO優化
viewport是否可縮放(爲移動設備優化)
favicon：若是未指定，大多數瀏覽器會請求根目錄下的favicon，爲避免404錯誤，兩種解決方法，一是在根目錄放置favicon.ico文件，二是使用link指定favicon文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO -->
    <title>Style Guide</title>
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="path/to/favicon.ico">
  </head>
</html>
複製代碼

4.1.2 外鏈資源URL協議

省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協議，使 URL 成爲相對地址，避免Mixed Content 問題，減少文件字節數。

Mixed Content：http和https混用形成的問題。

其它協議（ftp 等）的 URL 不省略。

<!-- 推薦 -->
<script src="//www.xxx.cn/statics/js/autotrack.js"></script>

<!-- 不推薦 -->
<script src="http://www.xxx.cn/statics/js/autotrack.js"></script>
複製代碼

/* 推薦 */
.example {
  background: url(//www.google.com/images/example);
}

/* 不推薦 */
.example {
  background: url(http://www.google.com/images/example);
}
複製代碼

4.1.3 標籤中的屬性順序

class(class 是最高的複用設計，應該放在最前)
id name(id 應儘可能少用)
data-\\* 自定義屬性（屬性名稱全小寫用-作鏈接）
src (資源文件)
placeholder title alt (提示)
required readonly disable(輔助)

4.1.4 語義化

語義的HTML結構，有助於機器搜索，保證代碼可讀性。

常見的標籤語義

標籤	語義
`<p>`	段落
`<h1,2,3>`	標題
`<ul>`	無序列表
`<ol>`	有序列表
`<blockquote>`	大段引用
`<cite>`	通常引用
`<b>`	爲樣式加粗
`<strong>`	爲強調加粗
`<i>`	爲樣式傾斜
`<em>`	爲強調傾斜
`<code>`	代碼標識
……	……

例如：

h1 大標題，通常用於banner背景，一個頁面有且只有一個
h2 章節標題，能夠有多個
h3 章節內的文章標題
h4,h5,h6 小標題/副標題
p 段落

├── h1---文章大標題
│   ├── h2--- 這裏是一個節點
│   │   ├──h3--- 節點內的文章標題
│   │   │   ├── h4,h5,h6--- 副標題/做者等信息
│   │   │   ├── p---段落
│   ├── h2--- 這裏是一個節點
│   │   ├──h3--- 節點內的文章標題
│   │   │   ├── h4,h5,h6--- 副標題/做者等信息
│   │   │   ├── p---段落    
複製代碼

4.1.5 引號規範

屬性值使用雙引號包裹

<div :data="data" data-src="some"></div>
複製代碼

4.1.6 註釋規範

<!-- 頭部 -->
<view class="header">
  <!-- LOGO -->
  <image class="logo"></image>
  <!-- /LOGO -->
  <!-- 詳情 -->
  <view class="detail"> </view>
  <!-- /詳情 -->
</view>
<!-- /頭部 -->
複製代碼

4.2 CSS規範

4.2.1 css初始化及公用樣式

/* ========================================================================== css 初始化 ============================================================================ */
 
 /* margin padding 初始化爲0 */
 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
	margin: 0;
	padding: 0;
}

body, button, input, select, textarea {
	font: 12px/1.5tahoma, arial, \5b8b\4f53;
}

h1, h2, h3, h4, h5, h6 {	font-size: 100%;}
address, cite, dfn, em, var {	font-style: normal;}

code, kbd, pre, samp {font-family: couriernew, courier, monospace;}

small {font-size: 12px;}

ul, ol {list-style: none;}

a {text-decoration: none;}

a:hover {text-decoration: none;}

sup {vertical-align: text-top;}

sub {vertical-align: text-bottom;}

legend {color: #000;}

fieldset, img {border: 0;}

button, input, select, textarea {font-size: 100%;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body {font-size: 10px !important;}
複製代碼

flex佈局共用樣式類，字體大小樣式類，margin,padding類：

/* flex佈局共用樣式類，字體大小樣式類，margin,padding
(若有需求，可自行添加)
 ============================================================================ */
.yl-flex{
    dispaly:flex;
 }
 
.flex-center-center{
    justify-content: center;
    justify-items: center;
    align-items: center
 }
 
.flex-start-center{
    justify-content: start;
    justify-items: center;
    align-items: center
 }
 
.flex-end-center{
    justify-content: end;
    justify-items: center;
    align-items: center
 }

.flex-wrap{
  flex-wrap: wrap;
}

.flex-column{
  flex-direction:column;
}

.flex-space-around{
  justify-content: space-around;
}

/* 文本 */
.tl {text-align: left;}

.tr {	text-align: right;}

.tc {	text-align: center;}

/* 按鈕 */
.btn {
    display: inline-block;
}

.btn-success {
    background: @success;
}

.btn-error {
    background: @error;
}
/* 按鈕禁用 */
.disabled {
	outline: 0 none;
	cursor: default !important;
	opacity: .4;
	filter: alpha(opacity=40);
	-ms-pointer-events: none;
	pointer-events: none;
}

/* 浮動與清除浮動 */
.fl {
	float: left;
}

.fr {
	float: right;
}

.fix {
	*zoom: 1;
}

.fix:after {
	display: table;
	content: '';
	clear: both;
}

/* 顯示 */ 
.dn {
	display: none;
}

.di {
	display: inline;
}

.db {
	display: block;
}

.dib {
	display: inline-block;
}

.dt {
	display: table;
}

/* 定位 */ 
.pr {
	position: relative;
}

.pa {
	position: absolute;
}

.pf {
	position: fixed;
}

.ml20 {
	margin-left: 20px;
}

.ml10 {
	margin-left: 10px;
}

.mr20 {
	margin-right: 20px;
}

.mr10 {
	margin-right: 10px;
}

.mt20 {
	margin-top: 20px;
}

.mt10 {
	margin-top: 10px;
}

.mb20 {
	margin-bottom: 20px;
}

.mb10 {
	margin-bottom:10px;
}
.ml5{
	margin-left:5px;
}
.m10{
	margin:10px;
}
.m20{
	margin:20px;
}
.p10{
	padding:10px;
}

.p20{
	padding:20px;
}
.pb20{
	padding-bottom:20px;
}
.pb10{
	padding-bottom:20px;
}
.pt20{
	padding-top:20px;
}
.pt10{
	padding-top:10px;
}
.pl20{
	padding-left:20px;
}
.pl10{
	padding-left:10px;
}
.pr20{
	padding-right:20px;
}
.pr10{
	padding-right:10px;
}
.rotate90{
	transform: rotate(90deg);
}
.rotate180{
	transform: rotate(180deg);
}
.rotate270{
	transform: rotate(270deg);
}
/* 圖片居中 */
.img-middle{
	object-fit: contain;
}
/* 文本超出隱藏 */
.txt-ellipsis{
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

.min-h100{
	min-height:100%;
}

.show {
	display: block;
}

.hide {
	display: none;
}

/* 字體 */

.f12 {
	font-size: 12px;
}

.f14 {
	font-size: 14px;
}

.f15 {
	font-size: 15px;
}
.f16 {
	font-size: 16px;
}

.f18 {
	font-size: 18px;
}

.f20 {
	font-size: 20px;
}

.f24 {
	font-size: 24px;
}

.f36 {
	font-size: 36px;
}
.f48 {
	font-size: 48px;
}
/* 滾動條優化 */
.scroll-style::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.scroll-style::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: #ccc;
}

.scroll-style::-webkit-scrollbar-track {
	width: 7px;
	background: #ebebeb;
}

複製代碼

4.2.2 `id class`命名規則

首先根據內容命名，如：nav,header
內容中的子元素使用-連接，名稱一概小寫，如：card-item
修飾類（易變的）使用--連接，如：card-item--warning
若無內容，結合行爲進行輔助，如：box-shawder
不影響語義的狀況下，可縮寫，如：img-box,btn
避免廣告攔截詞彙：ad,gg,banner,guagngao

4.2.3 屬性

屬性順序

位置屬性(position,top,right,z-index,display,flaot)
大小(width,height,padding,margin)
文字(font,line-height,letter-spacing, color)
背景 (background,border)
其餘(animation,transition)

屬性簡寫

屬性簡寫須要你很是清楚屬性值的正確順序，並且在大多數狀況下並不須要設置屬性簡寫中包含的全部值，因此建議儘可能分開聲明會更加清晰；

/* not good */
.element {
    transition: opacity 1s linear 2s;
}
 
/* good */
.element {
    transition-delay: 2s;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
}
複製代碼

margin 和 padding 相反，須要使用簡寫；margin 和 padding 相反，須要使用簡寫；

4.2.4 媒體查詢

儘可能將媒體查詢的規則靠近與他們相關的規則，不要將他們一塊兒放到一個獨立的樣式文件中，或者丟在文檔的最底部，這樣作只會讓你們之後更容易忘記他們。

.element-selected { ... }

@media (max-width: 768px) {
  .element-selected { ... }
}
複製代碼

4.2.5 註釋規範

組件塊和子組件之間的註釋

/* ========================================================================== 組件塊 ============================================================================ */

/* 子組件塊 ============================================================================ */
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/* 子組件塊 ============================================================================ */
.selector-secondary {
  display: block; /* 註釋*/
}
複製代碼

單行註釋/*後跟空格

/* xxx */
複製代碼

4.2.6 less規範

組織順序
- @import
- 變量聲明
- 樣式聲明
避免嵌套過多，將嵌套深度限制在3級，超過需從新評估

@import "mixins/size.less";

@default-text-color: #333;

.page {
  width: 960px;
  margin: 0 auto;
}
複製代碼

4.2.7 其餘規範

去掉小數點後面的0，如：rgba(0,0,0,0.5)=>rgba(0,0,0,.5)
顏色代碼儘可能簡寫，如：#fff
儘可能少用元素選擇器，元素選擇器和 ID、Class 混合使用也違反關注分離原則。若是HTML標籤修改了，就要再去修改 CSS 代碼，不利於後期維護。

/* 不推薦 */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}

/* 推薦 */
#nav {}
.box-video {}
#username input {}
#example {}
複製代碼

4.3 JavaScript編碼規範

4.3.1 縮進

html,css,js縮進一致，使用4個空格。

4.3.2 空格

二元運算符先後
三元運算符先後
代碼塊{前
關鍵字前：else, while, catch, finally
關鍵字後：if, else, for, while, do, switch, case, catch, finally, with, return
單行註釋//後，多行註釋/*後
對象的屬性值前
for 循環
函數的參數之間
運算符先後
函數聲明，函數表達式(前不要空格，)後空格

4.3.3 空行

變量聲明後
註釋前
代碼塊後
文件最後保留一個空行

let string = 'my'

let obj = {
    'name': 'yang'
}

{
    // do something
}

/* zheli */
if {
    
} else {
    
}

複製代碼

4.3.4 引號

最外層統一使用單引號。

let str = 'my name is'
複製代碼

4.3.5 模板字符串

須要拼接，儘可能少用+，多使用模板字符串

let str1 = 'yang'

let string = `hello ${str1}`

複製代碼

4.3.6 命名規範

變量命名：小駝峯命名
參數名：小駝峯命名
函數名：小駝峯命名
方法/屬性名：小駝峯命名
類名開頭大寫
私有屬性、變量和方法如下劃線 _ 開頭。
常量名：所有使用大寫+下劃線
由多個單詞組成的縮寫詞，在命名中，根據當前命名法和出現的位置，全部字母的大小寫與首字母的大小寫保持一致。
語義
- 變量應當使用名詞，儘可能符合當時語義
- boolean類型應當使用 is , has 等開頭
- 點擊事件命名方式：tap + onClick()

let loadingModules = {};

const HTML_ENTITY = {};

function stringFormat(theBells) {}

function insertHTML(element, html) {}

function Engine(options) {}

複製代碼

4.3.7 二元三元操做符

可用於簡單的if替代
操做符始終寫在前一行，避免產生預想不到的問題

// 不推薦 
var x = a ? b : c;

// 推薦 
var y = a ?
    longButSimpleOperandB : longButSimpleOperandC;

var z = a ?
        moreComplicatedB :
        moreComplicatedC;
複製代碼

4.3.8 && 和 ||

二元布爾操做符是可短路的, 只有在必要時纔會計算到最後一項。

// 不推薦
function foo(opt_win) {
  var win;
  if (opt_win) {
    win = opt_win;
  } else {
    win = window;
  }
  // ...
}

if (node) {
  if (node.kids) {
    if (node.kids[index]) {
      foo(node.kids[index]);
    }
  }
}

// 推薦
function foo(opt_win) {
  var win = opt_win || window;
  // ...
}

var kid = node && node.kids && node.kids[index];
if (kid) {
  foo(kid);
}
複製代碼

4.3.9 聲明規範

儘可能使用 let 聲明變量，少用 var 。

4.3.10 分號

如下狀況須要加分號

表達式
return
throw
break
continue
do-while

4.3.11 註釋規範

單行註釋，獨佔一行，//後跟空格
多行註釋，/*後跟空格
函數/方法註釋
- 註釋必須包含函數聲明，有參數和返回值時必須註釋標識
- 參數和返回類型必須包含類型信息和說明
- 當函數是內部函數，外部不可訪問時，可以使用@inner標識

// 註釋

/* xxxx xxxx xxxxx /* /** * 函數描述 * @param {string} p1 參數說明 * @param {string} p2 參數2的說明，比較長 * 那就換行了. * @param {number=} p3 參數3的說明（可選） * @return {Object} 返回值描述 /* function foo(p1, p2, p3) { return { p1: p1, p2: p2 } } 複製代碼

4.4 ESlint語法檢測

語法檢測能夠幫咱們肯定部分語法是否準確。

（五）代碼提交規範

代碼提交規範及版本管理

（六）版本管理