# 櫻花站點 （前端） > 因前端應用框架較為多 目前只做 VUE2 VUE3 (包含uni-app) 代碼風格規范 ## **1.頁面/視圖** - 命名參考 `car/list.vue 和 car/detail.vue car/update_status` 避免 `car/car_list.vue 和 car/car-detail.vue` - 特此說明，增刪查改、詳情統一使用如下 5 個單詞，不得使用其他（目的是為了統一各個端）`add / update / delete / detail / get` - 附： 函數方法常用的動詞: ``` get 獲取/set 設置, add 增加/remove 刪除, create 創建/destory 銷毀, start 啟動/stop 停止, open 打開/close 關閉, read 讀取/write 寫入, load 載入/save 保存, begin 開始/end 結束, backup 備份/restore 恢復, import 導入/export 導出, split 分割/merge 合并, inject 注入/extract 提取, attach 附著/detach 脫離, bind 綁定/separate 分離, view 查看/browse 瀏覽, edit 編輯/modify 修改, select 選取/mark 標記, copy 復制/paste 粘貼, undo 撤銷/redo 重做, insert 插入/delete 移除, add 加入/append 添加, clean 清理/clear 清除, index 索引/sort 排序, find 查找/search 搜索, increase 增加/decrease 減少, play 播放/pause 暫停, launch 啟動/run 運行, compile 編譯/execute 執行, debug 調試/trace 跟蹤, observe 觀察/listen 監聽, build 構建/publish 發布, input 輸入/output 輸出, encode 編碼/decode 解碼, encrypt 加密/decrypt 解密, compress 壓縮/decompress 解壓縮, pack 打包/unpack 解包, parse 解析/emit 生成, connect 連接/disconnect 斷開, send 發送/receive 接收, download 下載/upload 上傳, refresh 刷新/synchronize 同步, update 更新/revert 復原, lock 鎖定/unlock 解鎖, check out 簽出/check in 簽入, submit 提交/commit 交付, push 推/pull 拉, expand 展開/collapse 折疊, enter 進入/exit 退出, abort 放棄/quit 離開, obsolete 廢棄/depreciate 廢舊, collect 收集/aggregate 聚集 ``` ## **2.自定義事件應始終使用 kebab-case 的事件名** - 自定義變量命名 小駝峰為主 ``` this.$emit('my-event') <MyComponent @my-event="handleDoSomething" /> ``` ## **3.組件規范** ### 單文件組件名 - 文件擴展名為`.vue`的 single-file components（單文件組件）。單文件組件名應該始終是`單詞大寫開頭`（PascalCase 大駝峰）且為全單詞。 推薦： ``` components/ |- TheHeading.vue |- TheSidebar.vue ``` 不推薦： ``` components/ ├── Heading.vue ├── MySidebar.vue ``` ### 組件名中單詞順序 **組件名應該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾。 因為編輯器通常會按字母順序組織文件，所以現在組件之間的重要關系一目了然。** 推薦： ``` components/ ├── SearchButtonClear.vue ├── SearchButtonRun.vue ├── SearchInputQuery.vue ├── SearchInputExcludeGlob.vue ├── SettingsCheckboxTerms.vue ├── SettingsCheckboxLaunchOnStartup.vue ``` 不推薦： ``` components/ ├── ClearSearchButton.vue ├── ExcludeFromSearchInput.vue ├── LaunchOnStartupCheckbox.vue ├── RunSearchButton.vue ├── SearchInput.vue ├── TermsCheckbox.vue ``` ## html代碼 - 標簽 括號 有始有終 ~~錯誤示范~~ ~~~ <el-col :span="5" ><span class="left">確定時間：</span ><span class="right">{{ tableData.orderList.order_addtime }}</span></el-col > ~~~ 正確示范 ~~~ <el-col :span="5"> <span class="left">確定時間：</span> <span class="right">{{ tableData.orderList.order_addtime }}</span> </el-col> ~~~ ## VUE2.0 規范 ``` <template> <div id="my-component"> <DemoComponent /> </div> </template> <script> import DemoComponent from '../components/DemoComponent' export default { name: 'MyComponent', components: { DemoComponent }, mixins: [], props: {}, data () { return {} }, computed: {}, watch: {} created () {}, mounted () {}, destroyed () {}, methods: {}, } </script> <style lang="scss" scoped> #my-component { } </style> ```