# 櫻花站點 (前端)
> 因前端應用框架較為多 目前只做 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>
```
- 文檔說明
- 開始
- linux
- 常用命令
- ps -ef
- lsof
- netstat
- 解壓縮
- 復制
- 權限
- 其他
- lnmp集成安裝
- supervisor
- 安裝
- supervisor進程管理
- nginx
- 域名映射
- 負載均衡配置
- lnmp集成環境安裝
- nginx源碼安裝
- location匹配
- 限流配置
- 日志配置
- 重定向配置
- 壓縮策略
- nginx 正/反向代理
- HTTPS配置
- mysql
- navicat創建索引
- 設置外網鏈接mysql
- navicat破解
- sql語句學習
- 新建mysql用戶并賦予權限
- php
- opcache
- 設計模式
- 在CentOS下安裝crontab服務
- composer
- 基礎
- 常用的包
- guzzle
- 二維碼
- 公共方法
- 敏感詞過濾
- IP訪問頻次限制
- CURL
- 支付
- 常用遞歸
- 數據排序
- 圖片相關操作
- 權重分配
- 毫秒時間戳
- base64<=>圖片
- 身份證號分析
- 手機號相關操作
- 項目搭建 公共處理函數
- JWT
- 系統函數
- json_encode / json_decode 相關
- 數字計算
- 數組排序
- php8
- jit特性
- php8源碼編譯安裝
- laravel框架
- 常用artisan命令
- 常用查詢
- 模型關聯
- 創建公共方法
- 圖片上傳
- 中間件
- 路由配置
- jwt
- 隊列
- 定時任務
- 日志模塊
- laravel+swoole基本使用
- 拓展庫
- 請求接口log
- laravel_octane
- 微信開發
- token配置驗證
- easywechart 獲取用戶信息
- 三方包
- webman
- win下熱更新代碼
- 使用laravel db listen 監聽sql語句
- guzzle
- 使用workman的httpCLient
- 修改隊列后代碼不生效
- workman
- 安裝與使用
- websocket
- eleticsearch
- php-es 安裝配置
- hyperf
- 熱更新
- 安裝報錯
- swoole
- 安裝
- win安裝swoole-cli
- google登錄
- golang
- 文檔地址
- 標準庫
- time
- 數據類型
- 基本數據類型
- 復合數據類型
- 協程&管道
- 協程基本使用
- 讀寫鎖 RWMutex
- 互斥鎖Mutex
- 管道的基本使用
- 管道select多路復用
- 協程加管道
- beego
- gin
- 安裝
- 熱更新
- 路由
- 中間件
- 控制器
- 模型
- 配置文件/conf
- gorm
- 初始化
- 控制器 模型查詢封裝
- 添加
- 修改
- 刪除
- 聯表查詢
- 環境搭建
- Windows
- linux
- 全局異常捕捉
- javascript
- 常用函數
- vue
- vue-cli
- 生產環境 開發環境配置
- 組件通信
- 組件之間通信
- 父傳子
- 子傳父
- provide->inject (非父子)
- 引用元素和組件
- vue-原始寫法
- template基本用法
- vue3+ts項目搭建
- vue3引入element-plus
- axios 封裝網絡請求
- computed 計算屬性
- watch 監聽
- 使用@符 代替文件引入路徑
- vue開發中常用的插件
- vue 富文本編輯
- nuxt
- 學習筆記
- 新建項目踩坑整理
- css
- flex布局
- flex PC端基本布局
- flex 移動端基本布局
- 常用css屬性
- 盒子模型與定位
- 小說分屏顯示
- git
- 基本命令
- fetch
- 常用命令
- 每次都需要驗證
- git pull 有沖突時
- .gitignore 修改后不生效
- 原理解析
- tcp與udp詳解
- TCP三次握手四次揮手
- 緩存雪崩 穿透 更新詳解
- 內存泄漏-內存溢出
- php_fpm fast_cgi cig
- redis
- 相關三方文章
- API對外接口文檔示范
- elaticsearch
- 全文檢索
- 簡介
- 安裝
- kibana
- 核心概念 索引 映射 文檔
- 高級查詢 Query DSL
- 索引原理
- 分詞器
- 過濾查詢
- 聚合查詢
- 整合應用
- 集群
- docker
- docker 簡介
- docker 安裝
- docker 常用命令
- image 鏡像命令
- Contrainer 容器命令
- docker-compose
- redis 相關
- 客戶端安裝
- Linux 環境下安裝
- uni
- http請求封裝
- ios打包
- 視頻縱向播放
- 日記
- 工作日記
- 情感日志
- 壓測
- ab
- ui
- thorui
- 開發規范
- 前端
- 后端
- 狀態碼
- 開發小組未來規劃