目錄：
- 前言 ................................................................................................................................................................................
- Vue 簡(jiǎn)介..........................................................................................................................................................................
- Vue 特性 .........................................................................................................................................................................
- Vue 插件..........................................................................................................................................................................
- Vue項(xiàng)目開(kāi)發(fā)規(guī)規(guī)范.........................................................................................................................................................
1. 前言
目前Vue 是主流前端框架之一，它是用于構(gòu)建用戶界面的框架，它與其他大型框架如React等不同的是可以自底向上逐層應(yīng)用，相比于react對(duì)于原生js要求較低，開(kāi)發(fā)過(guò)程中只關(guān)心view視圖層，容易上手，開(kāi)發(fā)項(xiàng)目可讀性強(qiáng)，能夠以最簡(jiǎn)單的方式完成復(fù)雜的單頁(yè)應(yīng)用。
2. Vue 簡(jiǎn)介
- 作者： 尤雨溪（一位華裔前Google工程師）
- 目的：構(gòu)建用戶界面
- vue是漸進(jìn)式的JavaScript框架
3. Vue框架的最主要特點(diǎn)：
- 遵循MVVM模式（M => model數(shù)據(jù)對(duì)象，V=> view視圖層，VM => view model）
- 只關(guān)注 UI,可以輕松引入其他插件或第三方庫(kù)以及已有項(xiàng)目整合
- 體積小，運(yùn)行率高，適合移動(dòng)端和PC端開(kāi)發(fā)
4. Vue官網(wǎng)及插件官網(wǎng)地址
Vue官網(wǎng)鏈接
Vue 中英文官網(wǎng)文檔都是尤雨溪一人寫的，所以中英文文檔認(rèn)知程度沒(méi)有區(qū)別，只是語(yǔ)言的表達(dá)不同罷了，可直接切換不同語(yǔ)言就可以.
使用Vue開(kāi)發(fā)移動(dòng)端和PC端項(xiàng)目時(shí)用到的插件有所不同
- Vue CLI —— Vue腳手架
- Vue Router —— Vue官方的路由器管理
- vuex —— Vue狀態(tài)管理機(jī)
- Vue UI框架 iView —— 用于中后臺(tái)的PC端產(chǎn)品
- vue-lazyload —— 圖片懶加載
- vue-scroller ——頁(yè)面滑動(dòng)相關(guān)
- Element-UI —— 基于Vue的UI組件庫(kù)（優(yōu)先PC端使用）
- iView —— 主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品 （優(yōu)先PC端使用）
- mint-ui —— 基于Vue的UI組件庫(kù)（優(yōu)先移動(dòng)端端使用）
5. Vue 項(xiàng)目開(kāi)發(fā)規(guī)范
5.1 目錄結(jié)構(gòu)
|— build 構(gòu)建腳本目錄
|— build.js 生產(chǎn)環(huán)境構(gòu)建（編譯打包）腳本
|— check-versions.js 版本驗(yàn)證工具
|— utils.js 構(gòu)建相關(guān)工具方法（主要用來(lái)處理css類文件的loader）
|— vue-loader.conf.js 處理vue中的樣式
|— webpack.base.conf.js webpack基礎(chǔ)配置
|— webpack.dev.conf.js webpack開(kāi)發(fā)環(huán)境配置
|— webapck.prod.conf.js webpack生產(chǎn)環(huán)境配置
|— config 項(xiàng)目配置
|— dev.env.js 開(kāi)發(fā)環(huán)境變量
|— index.js 主配置文件
|— prod.env.js 生產(chǎn)環(huán)境變量
|— test.env.js 測(cè)試環(huán)境變量
|— dist build后生成的生產(chǎn)文件
|— static
|— css 生產(chǎn)版本頁(yè)面樣式
|— fonts 引用的字體庫(kù)
|— js 頁(yè)面懶加載后分成的js文件
|— index.html 生產(chǎn)版本的html模板入口頁(yè)面
|— node_modules 項(xiàng)目依賴模塊
|— mock mock數(shù)據(jù)目錄，用于本地?cái)?shù)據(jù)模擬
|— src 項(xiàng)目源碼目錄
|— assets 資源目錄，資源會(huì)被webpack構(gòu)建
|— js 公共js文件目錄
|— css 公共樣式文件目錄
|— images 圖片存放目錄
|— components 公共組件目錄
|— common
|— network
|— util.js 存放項(xiàng)目的網(wǎng)絡(luò)模塊，接口，比如統(tǒng)一管理時(shí)間等
|— tools 自己封裝的一些工具
|— App.vue 根組件
|— main.js 入口js文件
|— routers 前端路由目錄
|— index.js
|— pages 前端頁(yè)面文件
|— store 應(yīng)用級(jí)數(shù)據(jù)管理
|— index.js 組裝模塊并導(dǎo)出，統(tǒng)一管理導(dǎo)出，也可命名為store.js
|— state.js 單一狀態(tài)樹(shù)，定義應(yīng)用數(shù)據(jù)結(jié)構(gòu)及初始化狀態(tài)
|— getters.js 獲取state中的狀態(tài)，僅單向獲取數(shù)據(jù)，不做任何修改
|— actions.js 調(diào)用mutation方法對(duì)數(shù)據(jù)進(jìn)行操作
|— mutation-types.js 存放vuex常用的變量
|— mutations.js 定義state數(shù)據(jù)的修改操作
|— static 純靜態(tài)資源，不會(huì)被webpack構(gòu)建，eg:沒(méi)有npm包模塊
|— .babelrc babel的配置文件
|— .editorconfig 編輯器的配置文件
|— .gitignore git的忽略配置文件
|— .postcssrc.js postcss的配置文件
|— index.html html模板，入口頁(yè)面
|— package.json npm包配置文件，依賴包信息
|— README.md 項(xiàng)目介紹
5.2 css樣式處理選擇
推薦使用Stylus
原因：Stylus是來(lái)源于Node.js社區(qū)，與js關(guān)系密切，富于表現(xiàn)力、動(dòng)態(tài)的、健壯的 CSS、支持省略花括號(hào)、支持省略分號(hào)，靈活、整潔
5.3 文件名、組件命名規(guī)范、組件結(jié)構(gòu)規(guī)范
- 文件夾：
- 文件夾名稱應(yīng)統(tǒng)一格式，小寫開(kāi)頭，見(jiàn)名思意，pages頁(yè)面下的文件夾名稱統(tǒng)一以page結(jié)尾，例如：homePage,loginPage。
- 其余文件夾名稱統(tǒng)一按照項(xiàng)目結(jié)構(gòu)目錄命名規(guī)范統(tǒng)一命名。
- 組件：
- 組件名以單詞大寫開(kāi)頭，當(dāng)多個(gè)單詞拼寫成的組件時(shí)，采用駝峰式命名規(guī)則。一般是多個(gè)單詞全拼，減少簡(jiǎn)寫的情況，這樣增加可讀性。
- 組件應(yīng)該都放到components文件夾下，單個(gè)頁(yè)面獨(dú)立一個(gè)文件夾，用來(lái)放相對(duì)應(yīng)的vue文件以及頁(yè)面相關(guān)的樣式文件，樣式少可直接寫到頁(yè)面組件里邊，這樣更符合組件化的思想。
- 公用組件應(yīng)該統(tǒng)一放到public文件下。
- 基礎(chǔ)組件：
- 當(dāng)項(xiàng)目中需要自定義比較多的基礎(chǔ)組件的時(shí)候，比如一些button，input，icon，建議以一個(gè)統(tǒng)一的單詞Base開(kāi)頭，或者放到base文件夾統(tǒng)一管理，這樣做的目的是為了方便查找。
- 頁(yè)面級(jí)組件應(yīng)該放到相對(duì)應(yīng)頁(yè)面文件夾下，比如一些組件只有這個(gè)頁(yè)面用到，其他地方?jīng)]有用到的，可以直接放到頁(yè)面文件夾，然后以父組件開(kāi)頭命名，例如：HomeHeader.vue,HomeNav.vue。
- 項(xiàng)目級(jí)組件一般放到公共文件夾public下給所有的頁(yè)面使用。
- 組件結(jié)構(gòu)規(guī)范：組件結(jié)構(gòu)遵循從上往下：template,script,style的結(jié)構(gòu)
5.4 組件之template模板部分規(guī)范
- 盡量使用以.vue結(jié)束的單文件組件，方便管理，結(jié)構(gòu)清晰。
- 標(biāo)簽語(yǔ)義化，避免清一色的div元素
- 樣式class的命名：統(tǒng)一以小寫字母開(kāi)頭，小寫字母、下劃線和數(shù)字組成。命名中盡量避免使用中文拼音，應(yīng)該采用更簡(jiǎn)明有語(yǔ)義的英文單詞進(jìn)行組合。不建議使用駝峰法命名class屬性。使用下劃線的目的是為了和第三方庫(kù)中的命名沖突。例如：xx_left,xx_line。
- 多特性，分行寫，提高可讀性。即一個(gè)標(biāo)簽內(nèi)有多個(gè)屬性，屬性分行寫。
- 自定義標(biāo)簽：使用自閉標(biāo)簽的寫法。例如：，如果自定義標(biāo)簽中間需要傳入slot，則寫開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，結(jié)束標(biāo)簽必須加/。
- 組件/實(shí)例選項(xiàng)中的空行。便于閱讀和代碼架構(gòu)清晰。
5.5 組件之script部分規(guī)范
在 script 標(biāo)簽中，你應(yīng)該遵守 Js 的規(guī)范和ES6規(guī)范。
- 組件名稱：必須以大寫字母開(kāi)頭駝峰法命名。
- data必須是一個(gè)函數(shù)。
- Props定義：提供默認(rèn)值，使用type屬性校驗(yàn)類型，使用props之前先檢查prop是否存在
- 調(diào)試信息 console.log() debugger使用完及時(shí)刪除。
- 為v-for設(shè)置Key值。
- 使用計(jì)算 規(guī)避v-if和v-for用在一起。
- 無(wú)特殊情況不允許使用原生API操作dom,謹(jǐn)慎使用this.$refs直接操作dom。
- 使用ES6風(fēng)格編碼源碼,定義變量使用let,定義常量使用const,使用export,import模塊化。
- 指令縮寫：都用指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:)。
- 使用 data 里的變量時(shí)請(qǐng)先在 data 里面初始化。
- 函數(shù)中統(tǒng)一使用_this=this來(lái)解決全局指向問(wèn)題。
- 能用單引號(hào)不用雙引號(hào)。
- 盡量使用===,!==。
- 聲明變量必須賦值。
5.6 組件之style部分規(guī)范
- 使用 scoped關(guān)鍵字，約束樣式生效的范圍。
- 避免使用標(biāo)簽選擇器（效率低、損耗性能）。
- 非特殊情況下，禁止使用 ID 選擇器定義樣式。有 JS 邏輯的情況除外。
- CSS 屬性書寫順序：先決定定位寬高顯示大小，再做局部細(xì)節(jié)修飾！推薦順序：定位屬性(或顯示屬性，display)->寬高屬性->邊距屬性(margin, padding)->字體，背景，顏色等，修飾屬性的定義。
5.7 組件樣式
單個(gè)組件樣式一般可直接寫到組件下style標(biāo)簽下，為了防止樣式污染，可添加scoped 屬性，也可以通過(guò)設(shè)置作用域來(lái)防止樣式污染，寫樣式的時(shí)候盡量少寫元素選擇器，為了提高代碼查找速度，可以用類選擇器。
5.8 文件格式
采用UTF-8編碼格式
5.9 注釋規(guī)范
注意在注釋的前后各有一個(gè)空格。
- HTML注釋：
- CSS注釋：/* write your HTML comment! */
- Stylus注釋：
a) 單行注釋：// 我是less注釋，和js的單行注釋一樣，在css中不輸出
b) 多行注釋
在這里插入代碼片
/*
* less的多行注釋，只有在compress選項(xiàng)未啟用的時(shí)候
* 才會(huì)被輸出
*/
c) 多行緩沖注釋：
/*！
* less的多行緩存注釋, Stylu壓縮的時(shí)候這段代碼無(wú)視
*/
- JS注釋：
a) 行級(jí)注釋（注意//后面空格）：// 正確的注釋
b) 變量聲明注釋：如果是在類似 Vue 項(xiàng)目的 data 屬性中的變量，直接用行級(jí)樣式跟在后面。
例如：rightExample: ‘yes’, // 注釋直接寫這里
c) 如果是在類，構(gòu)造函數(shù)，或者常量定義中的變量，使用塊級(jí)注釋。
例如：
/*
* 錯(cuò)誤碼常亮定義
* @type {number}
*/
d) 函數(shù)聲明注釋：不必要在每一個(gè)函數(shù)都寫注釋，但是在公共函數(shù)，還是建議補(bǔ)全注釋，讓后面的人不需要重復(fù)早輪子。
e) 復(fù)雜的業(yè)務(wù)邏輯處理說(shuō)明、特殊情況的代碼處理說(shuō)明，對(duì)于特殊用途的變量、存在臨界值、使用了某種算法思路進(jìn)行注釋說(shuō)明
5.10 資源路徑配置、引入規(guī)則
- 路徑配置
在build/webpack.base.conf.js文件中配置。
alias: {
‘@’: resolve(‘src’), // 默認(rèn)配置，設(shè)置src目錄別名
‘childRouter’: resolve(‘src/pages/menuRouter’), // 子路由路徑配置
‘#’: resolve(‘src/assets’) // 配置assets文件夾路徑
}
- 路徑導(dǎo)入
1 .js文件中導(dǎo)入實(shí)例：
- 導(dǎo)入node_modules模塊中的文件，直接引入即可，不需要加文件后綴名，如：import ElementUI from 'element-ui'
- 導(dǎo)入自定義文件的時(shí)候，使用相對(duì)路徑或者使用路徑配置別名，不許要加文件后綴名,如從一個(gè)叫blog.js文件中導(dǎo)入：import blog from '@/api/blog'
- css樣式導(dǎo)入：需要使用 ~@ 開(kāi)頭，例如：
@import url('../../assets/base.less');
5.11 數(shù)據(jù)中心
- 各個(gè)文件的命名根據(jù)上面的項(xiàng)目結(jié)構(gòu)命名。
- 應(yīng)用層級(jí)的狀態(tài)應(yīng)該集中到單個(gè) store 對(duì)象中。
- action和mutation中的函數(shù)統(tǒng)一聲明在mutation-type.js內(nèi)。
- mutation-types里面的常量、常量值全部用大寫+英文單詞配合下劃線的形式：例如：export const UPDATE_USERINFO = “UPDATE_USERINFO”。
- 提交 mutation 是更改狀態(tài)的唯一方法，并且這個(gè)過(guò)程是同步的。
- 異步邏輯都應(yīng)該封裝到 action 里面。
- vuex 的dispatch和commit提交mutation的區(qū)別：dispatch=>actions用來(lái)觸發(fā)異步操作，commit=>mutation用來(lái)觸發(fā)同步操作的方法。當(dāng)操作行為中含有異步操作，比如向后臺(tái)發(fā)送請(qǐng)求獲取數(shù)據(jù)，就需要使用action的dispatch去完成，其他使用commit即可。
5.12 路由
router/index.js中的內(nèi)容
- 一般情況下路由至少包含三個(gè)選項(xiàng)：path、name、component，name可有可無(wú)。path統(tǒng)一小寫；name對(duì)應(yīng)于組件中的name，大寫開(kāi)頭駝峰；component組件名稱大寫開(kāi)頭的組件駝峰。
- 一級(jí)路由統(tǒng)一使用相對(duì)路徑的形式。二級(jí)路由可以配置，配置見(jiàn)資源路徑的配置、引入規(guī)則。
5.13 axios
- 根據(jù)需要配置post、get請(qǐng)求，一個(gè)是取一個(gè)是貼，只需要讀取文件，put（PUT 往服務(wù)器上上傳文件）、delect（刪除）直接對(duì)數(shù)據(jù)進(jìn)行操作相對(duì)不安全 。
- axios的掛載：Vue.prototype.$http = axios;
- axios使用封裝后的get/post請(qǐng)求。
- ajax的判斷
首先 ajax 請(qǐng)求可以寫在 actions也可以直接寫在 .vue 頁(yè)面里。
我們判斷的依據(jù)是回調(diào)是否需要調(diào)用頁(yè)面結(jié)構(gòu)來(lái)區(qū)分,
比如在.vue頁(yè)面中發(fā)送完請(qǐng)求后需要調(diào)用 this.$refs.element等,或者需要利用組件的獨(dú)立性的效果時(shí) 后，那就寫在.vue頁(yè)面,否則就寫在 actions 里。 - axios 的更詳細(xì)用法 點(diǎn)擊查看
5.14 util管理
同一網(wǎng)絡(luò)接口
- 新建src/ network/util.js
放置api路徑，要注意 axios已經(jīng)有了前綴,所以這里的 api 值需要寫前綴之后的路徑。當(dāng)路徑較多時(shí)可以再多建幾個(gè)文件,分類放置。
例如：
// 統(tǒng)一管理接口
export default {
manage: {
fertilizerStation: '/api/AllFertSiteNameList', // 獲取列表
userLogin: '/api/Login' // 用戶登錄
}
- 在main.js中引入
import Util from '@/helpers/util'
使用 Vue.prototype.friendlyDate = friendlyDate 掛載到原型鏈上即可處處使用
5.15 依賴規(guī)范
在package.json里添加依賴包
"dependencies": {
"axios": "^0.19.2",
"element-ui": "^2.13.2",
"less-loader": "^4.1.0",
"marked": "^1.1.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.5.1"
},
5.16 Web字體規(guī)范
- 優(yōu)先使用框架中的字體圖標(biāo)，比如element ui中的
- 使用iconfont字體圖標(biāo)代替圖片
- 在規(guī)范中包括的字體格式有：
woff: WOFF (Web Open Font 格式)
ttf: TrueType
ttf, otf: OpenType
eot: 嵌入式 OpenType
svg, svgz: SVG 字體 - 字體規(guī)則
a) 為了防止文件合并及編碼轉(zhuǎn)換時(shí)造成問(wèn)題，建議將樣式中文字體名字改成對(duì)應(yīng)的英文名字，如：黑體(SimHei)、宋體(SimSun)、微軟雅黑(Microsoft Yahei)。
b) 字體粗細(xì)采用具體數(shù)值，粗體bold寫成700，正常normal寫成400。
c) font-size必須以px為單位。
為了對(duì)font-family取值進(jìn)行統(tǒng)一，更好的支持各個(gè)操作系統(tǒng)上各個(gè)瀏覽器的兼容性，font-family不允許在業(yè)務(wù)代碼中隨意設(shè)置。
