## VUEJS開發(fā)規(guī)范 ##

1. 基于組件化開發(fā)理解

2. 組件命名規(guī)范

3. 結(jié)構(gòu)化規(guī)范

4. 注釋規(guī)范

5. 編碼規(guī)范

----------

### 基于組件化開發(fā)理解 ###

- 什么是組件？

? ? ? ? ? 組件其實(shí)就是頁面組成的一部分，好比是電腦中的每一個(gè)元件（如硬盤、鍵盤、鼠標(biāo)），它是一個(gè)具有獨(dú)立的邏輯和功能或界面，同時(shí)又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互融化，變成一個(gè)完整的應(yīng)用。

? ? ? ? ? 頁面只不過是這樣組件的容器，組件自由組合形成功能完整的界面，當(dāng)不需要某個(gè)組件，或者想要替換某個(gè)組件時(shí)，可以隨時(shí)進(jìn)行替換和刪除，而不影響整個(gè)應(yīng)用的運(yùn)行。前端組件化的核心思想就是將一個(gè)巨大復(fù)雜的東西拆分成粒度合理的小東西。

- 組件化開發(fā)的好處

? ? ? ? 提高開發(fā)效率

? ? ? ? 方便重復(fù)使用

? ? ? ? 簡化調(diào)試步驟

? ? ? ? 提升整個(gè)項(xiàng)目的可維護(hù)性

? ? ? ? 便于協(xié)同開發(fā)

? ? ? ? 使其高內(nèi)聚，低耦合，達(dá)到分治與復(fù)用的目的。

- 組件化和模塊化的區(qū)別

? ? ? ? 組件化是從產(chǎn)品功能角度進(jìn)行分割，模塊化是從代碼實(shí)現(xiàn)角度進(jìn)行分割，模塊化是組件化的前提和基礎(chǔ)。

- Vue組件化開發(fā)

? ? ? ? 單文件系統(tǒng)，樣式局部作用域

? ? ? ? 基本組成結(jié)構(gòu)：<template/> <script/> <style scoped/>

? ? ? ? 組件注冊(cè)方式：1）公共組件全局注冊(cè) 2）其余組件局部注冊(cè)

### 組件命名規(guī)范 ###

Vue官方文檔給予以下說明：

? ? 當(dāng)注冊(cè)組件 (或者 prop) 時(shí)，可以使用 kebab-case (短橫線分隔命名)、camelCase (駝峰式命名) 或 PascalCase (單詞首字母大寫命名)。

? ? PascalCase 是最通用的聲明約定而 kebab-case 是最通用的使用約定。

命名可遵循以下規(guī)則：? ?

? ? 1、有意義的名詞、簡短、具有可讀性

? ? 2、以小寫開頭，采用短橫線分割命名

? ? 3、公共組件命名以公司名稱簡拼為命名空間(app-xx.vue)

? ? 4、文件夾命名主要以功能模塊代表命名

? ? 同時(shí)還需要注意：必須符合自定義元素規(guī)范: 使用連字符分隔單詞，切勿使用保留字。app- 前綴作為命名空間: 如果非常通用的話可使用一個(gè)單詞來命名，這樣可以方便于其它項(xiàng)目里復(fù)用。?

### 結(jié)構(gòu)化規(guī)范 ###

- 基于Vue-cli腳手架的結(jié)構(gòu)基礎(chǔ)劃分

? ? ? ? ├── index.html? ? ? ? ? ? ? ? ? ? ? 入口頁面

? ? ? ? ├── build? ? ? ? ? ? ? ? ? ? ? ? ? 構(gòu)建腳本目錄

? ? ? ? │? ├── build-server.js? ? ? ? ? ? ? ? 運(yùn)行本地構(gòu)建服務(wù)器，可以訪問構(gòu)后的頁面

? ? ? ? │? ├── build.js? ? ? ? ? ? ? ? ? ? ? ? 生產(chǎn)環(huán)境構(gòu)建腳本

? ? ? ? │? ├── dev-client.js? ? ? ? ? ? ? ? ? 開發(fā)服務(wù)器熱重載腳本，主要用來實(shí)現(xiàn)開發(fā)階段的頁面自動(dòng)刷新

? ? ? ? │? ├── dev-server.js? ? ? ? ? ? ? ? ? 運(yùn)行本地開發(fā)服務(wù)器

? ? ? ? │? ├── utils.js? ? ? ? ? ? ? ? ? ? ? ? 構(gòu)建相關(guān)工具方法

? ? ? ? │? ├── webpack.base.conf.js? ? ? ? ? ? wabpack基礎(chǔ)配置

? ? ? ? │? ├── webpack.dev.conf.js? ? ? ? ? ? wabpack開發(fā)環(huán)境配置

? ? ? ? │? └── webpack.prod.conf.js? ? ? ? ? ? wabpack生產(chǎn)環(huán)境配置

? ? ? ? ├── config? ? ? ? ? ? ? ? ? ? ? ? ? 項(xiàng)目配置

? ? ? ? │? ├── dev.env.js? ? ? ? ? ? ? ? ? ? ? 開發(fā)環(huán)境變量

? ? ? ? │? ├── index.js? ? ? ? ? ? ? ? ? ? ? ? 項(xiàng)目配置文件

? ? ? ? │? ├── prod.env.js? ? ? ? ? ? ? ? ? ? 生產(chǎn)環(huán)境變量

? ? ? ? │? └── test.env.js? ? ? ? ? ? ? ? ? ? 測試環(huán)境變量

? ? ? ? ├── mock? ? ? ? ? ? ? ? ? ? ? ? ? ? mock數(shù)據(jù)目錄

? ? ? ? │? └── hello.js

? ? ? ? ├── package.json? ? ? ? ? ? ? ? ? ? npm包配置文件，里面定義了項(xiàng)目的npm腳本，依賴包等信息

? ? ? ? ├── src? ? ? ? ? ? ? ? ? ? ? ? ? ? 項(xiàng)目源碼目錄? ?

? ? ? ? │? ├── main.js? ? ? ? ? ? ? ? ? ? ? ? 入口js文件

? ? ? ? │? ├── App.vue? ? ? ? ? ? ? ? ? ? ? ? 根組件

? ? ? ? │? ├── components? ? ? ? ? ? ? ? ? ? ? 公共組件目錄

? ? ? ? │? │? └── title.vue

? ? ? ? │? ├── assets? ? ? ? ? ? ? ? ? ? ? ? ? 資源目錄，這里的資源會(huì)被wabpack構(gòu)建

? ? ? ? │? │? ├── css? ? ? ? ? ? ? ? ? ? ? ? 公共樣式文件目錄

? ? ? ? │? │? ├── js? ? ? ? ? ? ? ? ? ? ? ? ? 公共js文件目錄

? ? ? ? │? │? └── img? ? ? ? ? ? ? ? ? ? ? 圖片存放目錄

? ? ? ? │? ├── routes? ? ? ? ? ? ? ? ? ? ? ? ? 前端路由

? ? ? ? │? │? └── index.js

? ? ? ? │? ├── store? ? ? ? ? ? ? ? ? ? ? ? ? 應(yīng)用級(jí)數(shù)據(jù)（state）

? ? ? ? │? │? └── index.js

? ? ? ? │? └── views? ? ? ? ? ? ? ? ? ? ? ? ? 頁面目錄

? ? ? ? │? ? ? ├── hello.vue

? ? ? ? │? ? ? └── notfound.vue

? ? ? ? ├── static? ? ? ? ? ? ? ? ? ? ? ? ? 純靜態(tài)資源，不會(huì)被wabpack構(gòu)建。

? ? ? ? └── test? ? ? ? ? ? ? ? ? ? ? ? ? ? 測試文件目錄（unit&e2e）

? ? ? ? ? ? └── unit? ? ? ? ? ? ? ? ? ? ? ? ? ? 單元測試

? ? ? ? ? ? ? ? ├── index.js? ? ? ? ? ? ? ? ? ? ? ? 入口腳本

? ? ? ? ? ? ? ? ├── karma.conf.js? ? ? ? ? ? ? ? ? karma配置文件

? ? ? ? ? ? ? ? └── specs? ? ? ? ? ? ? ? ? ? ? ? ? 單測case目錄

? ? ? ? ? ? ? ? ? ? └── Hello.spec.js

- vue文件基本結(jié)構(gòu)

```

? ? ? ? <template>

? ? ? ? ? <div>

? ? ? ? ? ? <!--必須在div中編寫頁面-->

? ? ? ? ? </div>

? ? ? ? </template>

? ? ? ? <script>

? ? ? ? ? export default {

? ? ? ? ? ? components : {

? ? ? ? ? ? },

? ? ? ? ? ? data () {

? ? ? ? ? ? ? return {

? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? methods: {

? ? ? ? ? ? },

? ? ? ? ? ? mounted() {

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? </script>

? ? ? ? <!--聲明語言，并且添加scoped-->

? ? ? ? <style lang="less" scoped>

? ? ? ? </style>

```

- vue文件方法聲明順序

? ? ? ? - components?

? ? ? ? - props? ?

? ? ? ? - data? ?

? ? ? ? - created

? ? ? ? - mounted

? ? ? ? - activited

? ? ? ? - update

? ? ? ? - beforeRouteUpdate

? ? ? ? - metods?

? ? ? ? - filter

? ? ? ? - computed

? ? ? ? - watch

### 注釋規(guī)范 ###

? 代碼注釋在一個(gè)項(xiàng)目的后期維護(hù)中顯的尤為重要，所以我們要為每一個(gè)被復(fù)用的組件編寫組件使用說明，為組件中每一個(gè)方法編寫方法說明。

以下情況，務(wù)必添加注釋

? ? 1.公共組件使用說明

? ? 2.各組件中重要函數(shù)或者類說明

? ? 3.復(fù)雜的業(yè)務(wù)邏輯處理說明

? ? 4.特殊情況的代碼處理說明,對(duì)于代碼中特殊用途的變量、存在臨界值、函數(shù)中使用的hack、使用了某種算法或思路等需要進(jìn)行注釋描述

? ? 5.注釋塊必須以/**（至少兩個(gè)星號(hào)）開頭**/；

? ? 6.單行注釋使用//；

- 單行注釋

? ? ? ? 普通方法一般使用單行注釋// 來說明該方法主要作用

- 多行注釋

? ? ? ? 組件使用說明，和調(diào)用說明

? ? ? ? <!--公用組件：數(shù)據(jù)表格

? ? ? ? ? /**

? ? ? ? ? * 組件名稱

? ? ? ? ? * @module 組件存放位置

? ? ? ? ? * @desc 組件描述

? ? ? ? ? * @author 組件作者

? ? ? ? ? * @date 2017年12月05日17:22:43

? ? ? ? ? * @param {Object} [title]? ? - 參數(shù)說明

? ? ? ? ? * @param {String} [columns] - 參數(shù)說明

? ? ? ? ? * @example 調(diào)用示例

? ? ? ? ? *? <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>

? ? ? ? ? ? ? */

? ? ? ? ? ? -->

### 編碼規(guī)范 ###

優(yōu)秀的項(xiàng)目源碼，即使是多人開發(fā)，看代碼也如出一人之手。統(tǒng)一的編碼規(guī)范，可使代碼更易于閱讀，易于理解，易于維護(hù)。**盡量按照ESLint格式要求編寫代碼**

? ? ? ? 1.使用ES6風(fēng)格編碼源碼

? ? ? ? ? ? 定義變量使用let ,定義常量使用const

? ? ? ? ? ? 使用export ，import 模塊化

? ? ? ? 2.組件 props 原子化

? ? ? ? ? ? 提供默認(rèn)值

? ? ? ? ? ? 使用 type 屬性校驗(yàn)類型

? ? ? ? ? ? 使用 props 之前先檢查該 prop 是否存在

? ? ? ? 3.避免 this.$parent

? ? ? ? 4.謹(jǐn)慎使用 this.$refs

? ? ? ? 5.無需將 this 賦值給 component 變量

? ? ? ? 6.調(diào)試信息console.log() debugger 使用完及時(shí)刪除