vue作為前端應(yīng)用的三大框架之一，其易上手赡矢，門檻低杭朱。給人簡單，高效的感覺吹散。但要寫好vue代碼弧械，需有一定的規(guī)范防止自己邏輯出錯，以及提高閱讀效率空民。
1.目錄規(guī)范及結(jié)構(gòu)
- src文件夾目錄結(jié)構(gòu)
src
|--api 公用接口刃唐，統(tǒng)一管理存放文件夾
|--assets 圖片存放，建議在存放圖片時界轩，按照一個模塊一個文件夾進(jìn)行存放画饥，如是公用圖片，則將其放入公用文件夾浊猾。
|--components 公用組件存放庫抖甘，建議每個組件單獨一個文件夾
--index.js 公用組件統(tǒng)一管理文件
|--filters 全局過濾器
|--routers 公用路由配置存放文件夾，建議每個模塊單獨一個文件夾
--index.js 路由配置統(tǒng)一文件
|--store vuex配置管理
|--styles 全局樣式統(tǒng)一管理存放文件夾
|--utils 公用方法存放文件夾
|--view 模塊組件文件存放文件夾葫慎，建議每個模塊單獨一個文件夾
|--main 存放首頁文件
|--components 局部組件
--index.js
|--pages 模塊組件
--App.vue 根組件
--main.js 生成vue實例及全局方法路由引進(jìn)配置文件
--router.js 可配置路由文件
注：上述目錄是博主日常工作采用的文件目錄模式衔彻，不能說明其好壞，只能說適合自己就好幅疼。
-
組件命名規(guī)范
（1）不能使用關(guān)鍵字作為命名
（2）聲明用大駝峰命名米奸，即首字母大寫import studentClass from '文件位置' //不推薦 import StudentClass from '文件位置' //推薦（3）導(dǎo)入及注冊組件時采用大駝峰命名
（4）簡短、易理解爽篷、可讀性好
2.組件內(nèi)容順序
vue單文件組件（js寫邏輯的）分為三大塊悴晰，如下：
<template>
這里寫模板（HTML語言）
</template>
<script>
export default{
components:{},
name:'自定義',
data(){
return {}//必加，否則報錯
},
mounted(){},
methods:{},
}
</script>
<style lang="scss" scoped>
這里寫局部樣式，當(dāng)然去掉scoped就是全局樣式了
</style>
- template部分的規(guī)范
首先單文件組件的根標(biāo)簽template下铡溪，只能有一對標(biāo)簽
<template>
<div></div> <!--正常-->
</template>
<template>
<div></div>
<div></div> <!--報錯-->
</template>
?其次建議少用id選擇器漂辐，盡量用類名進(jìn)行替換。類名命名要符合語義化棕硫，標(biāo)簽盡量用語義化標(biāo)簽髓涯。具體請看前端：規(guī)范2、前端：規(guī)范3
<div id="nav-bar"></div>
//可以替換成
<div class="nav nav-base nav-bar"></div>
這樣拆分樣式哈扮，可以降低代碼量纬纪，提出公用樣式，以及減少維護(hù)及二次開發(fā)人員的維護(hù)或開發(fā)難度滑肉。
- script 部分的規(guī)范
?1.放置區(qū)域劃分
<script>
import 插件 from '導(dǎo)入文件的位置'
import 混合 from '導(dǎo)入文件的位置'
import 組件from '導(dǎo)入文件的位置'
import 其他 from '導(dǎo)入文件的位置' //導(dǎo)入文件位置
const NAV_lIST = [];//常量位置
export default{//vue實例選項位置
components:{},
name:'自定義',
data(){
return {}//必加包各，否則報錯
},
mounted(){},
methods:{},
}
</script>
?2..vue選項順序（常用）
|- components
|- model
|- props
|- mixins
|- provide
|- inject
|- name
|- data
|- computed
|- created
|- mounted
|- methods
|- filter
|- watch
|- destroy
?2.常量命名
??常量命名采用大寫，多個單詞間用 _下劃線分隔靶庙。
const pi= Math.PI //不推薦
const PI=Math.PI //推薦
const myName = 'lin'
const my_name = 'lin'
?3.變量命名
??變量命名采用小駝峰命名方式问畅，也可以將小寫單詞用_下滑先相連,單個單詞時用小寫。
let count = 10
let all_count = 100
let allCount = 100
let allcount = 100 //不推薦
?4.方法命名
??方法命名采用動-賓結(jié)構(gòu)六荒，例如：我需要重后臺獲取菜單數(shù)據(jù)护姆，可以命名成‘getMenuData’。書寫格式采用小駝峰掏击。注意命名時盡量用少量的單詞描述清楚該方法是要做什么的卵皂。
methods:{
/**
*這里是注釋
*/
getMenuList(){
}
}
?5.方法注釋
??寫方法注釋的目的就是為了讓自己或者同事，后續(xù)改動時能夠快速上手代碼铐料，基本上需要的幾項如下渐裂，當(dāng)然也可以如上只保留描述：
/**
* 方法描述
* @param {*} params 傳入?yún)?shù)描述
* @author 作者
* @returns 返回值
*/
getList(params){
return params;
}
3.單頁組件代碼量規(guī)范
?一般的單組件文件的代碼行數(shù)超過300行時，即可以進(jìn)行拆分文件钠惩。當(dāng)代碼行數(shù)超過600行時必須對其進(jìn)行拆分柒凉。精簡代碼。拆分的方法篓跛，一般有（目前博主知道的）:
? - 利用vue混合(mixins)將某一特定功能的變量膝捞，方法集中到一起。
? - 將某一特定功能的實現(xiàn)封裝成特定的組件
? - 將特定功能抽象封裝成類（這個估計大神可以）
? - 抽取公用方法愧沟、樣式
4.常用命名動詞收集
注:如下的這段命名常用動詞蔬咬，來自史上最全的Vue開發(fā)規(guī)范。如有侵權(quán)請聯(lián)系博主刪除
get 獲取/set 設(shè)置,
add 增加/remove 刪除
create 創(chuàng)建/destory 移除
start 啟動/stop 停止
open 打開/close 關(guān)閉,
read 讀取/write 寫入
load 載入/save 保存,
create 創(chuàng)建/destroy 銷毀
begin 開始/end 結(jié)束,
backup 備份/restore 恢復(fù)
import 導(dǎo)入/export 導(dǎo)出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附著/detach 脫離
bind 綁定/separate 分離,
view 查看/browse 瀏覽
edit 編輯/modify 修改,
select 選取/mark 標(biāo)記
copy 復(fù)制/paste 粘貼,
undo 撤銷/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 減少
play 播放/pause 暫停,
launch 啟動/run 運行
compile 編譯/execute 執(zhí)行,
debug 調(diào)試/trace 跟蹤
observe 觀察/listen 監(jiān)聽,
build 構(gòu)建/publish 發(fā)布
input 輸入/output 輸出,
encode 編碼/decode 解碼
encrypt 加密/decrypt 解密,
compress 壓縮/decompress 解壓縮
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 連接/disconnect 斷開,
send 發(fā)送/receive 接收
download 下載/upload 上傳,
refresh 刷新/synchronize 同步
update 更新/revert 復(fù)原,
lock 鎖定/unlock 解鎖
check out 簽出/check in 簽入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展開/collapse 折疊
begin 起始/end 結(jié)束,
start 開始/finish 完成
enter 進(jìn)入/exit 退出,
abort 放棄/quit 離開
obsolete 廢棄/depreciate 廢舊,
collect 收集/aggregate 聚集
注：本文章參考
?史上最全的Vue開發(fā)規(guī)范 ps:該規(guī)范強烈推薦沐寺，內(nèi)容條理清晰林艘，很詳細(xì)
?Vue項目代碼規(guī)范
