# 樱花站点 （前端） > 因前端应用框架较为多 目前只做 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> ```