Vue命名规范
Vue 规范 命名
2023-09-14 09:00:18 时间
views 命名
views 文件夹下面是由 以页面为单位的vue文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components、assets 同级。
views 下的文件夹命名
- views 下面的文件夹代表着模块的名字
- 由名词组成(car、order、cart)
- 单词只能有一个(good: car order cart)(bad: carInfo carpage)
- 尽量是名词(good: car)(bad: greet good)
- 以小写开头(good: car)(bad: Car)
views 下的 vue 文件命名
- views 下面的 vue 文件代表着页面的名字
- 放在模块文件夹之下
- 只有一个文件的情况下不会出现文件夹,而是直接放在 views 目录下面,如 Login Home
- 尽量是名词
- 大写开头,开头的单词就是所属模块名字(CarDetail、CarEdit、CarList)
- 名字至少两个单词(good: CarDetail)(bad: Car)
- 常用结尾单词有(Detail、Edit、List、Info、Report)
- 以 Item 结尾的代表着组件(CarListItem、CarInfoItem)
vue 方法命名
vue 方法放置顺序
- components
- props
- data
- created
- mounted
- activited
- update
- beforeRouteUpdate
- metods
- filter
- computed
- watch
method 自定义方法命名
- 动宾短语(good:jumpPage、openCarInfoDialog)(bad:go、nextPage、show、open、login)
- ajax 方法以 get、post 开头,以 data 结尾(good:getListData、postFormData)(bad:takeData、confirmData、getList、postForm)
- 事件方法以 on 开头(onTypeChange、onUsernameInput)
- init、refresh 单词除外
- 尽量使用常用单词开头(set、get、open、close、jump)
- 驼峰命名(good: getListData)(bad: get_list_data、getlistData)
data props 方法注意点
- 使用 data 里的变量时请先在 data 里面初始化
- props 指定类型,也就是 type
- props 改变父组件数据 基础类型用 $emit ,复杂类型直接改
- ajax 请求数据用上 isLoading、isError 变量
- 不命名多余数据,现在是详情页、你的数据是 ajax 请求的,那就直接声明一个对象叫 d,而不是每个字段都声明
- 表单数据请包裹一层 form
生命周期方法注意点
- 不在 mounted、created 之类的方法写逻辑,取 ajax 数据,
- 在 created 里面监听 Bus 事件
相关文章
- 使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式
- webstorm开发vue项目环境配置
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
- [Vue] Get up and running with vue-router
- Vue.js 组件编码规范
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Get up and running with vue-router
- vue.js3: 用crypto-js做sha加密(vue@3.2.37 / crypto-js@4.1.1)
- vue.js3: 给滑动滚动添加上惯性(vue@3.2.26)
- GVA gin-vue-admin部署后端注意事项
- npm install时报平台不兼容Unsupported platform for xxx的解决办法:npm install -f强制安装(centos7下安装vite2 vue依赖时出现这个问题)
- Vue compile - Vue中的双大括号 {{ 是如何被解析(parse)的
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- 前端框架Vue------>第一天学习(2) v-if
- 前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- vue中父子组件值的传递
- Vue中vue-i18n结合element-ui实现国际化
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- Vue.js 目录结构
- Vue学习笔记——vue-router