【Vue】教程:二、命名规范

一、views 文件夹


1.文件夹命名方式

1.1.一级目录

  • 代表模块的名字
  • 尽量由名词组成
  • 单词只有一个
  • 文件夹名字以小写字母开头,.vue文件名字以大写字母开头
  • 只有一个文件时不出现文件夹,直接放在 views 下面,为***.vue文件

main | login | common,Main.vue | Login.vue | Common.vue

1.2.二级目录

  • 代表着一级目录中某一大模块的名字
  • 尽量由名词组成
  • 名字至少两个单词
  • 文件夹名字以小写字母开头,.vue文件名字以大写字母开头
  • 只有一个文件时不出现文件夹,直接放在 一级目录 下面,为***.vue文件

常用结尾单词有 Detail | Edit | List | Info | Report,如 SolutionList

Item 结尾的代表着组件,如 SolutionItem

2.method 自定义方法命名

  • 动宾短语 toPage | editSoloutionInfo
  • ajax | axios方法:以 get | post 开头,以 data 结尾如,getListData postFormData
  • 事件方法:以 on 开头(init refresh 单词除外),如 onTypeChange onUsernameInput
  • 尽量使用常用单词开头如, set | get | open | close | jump
  • 驼峰命名 getListData

3.data props 方法注意点

  • 使用 data 里的变量时请先在 data 里面初始化
  • props 指定类型,也就是 type
  • props 改变父组件数据,基础类型用 $emit ,复杂类型直接改
  • ajax 请求数据用上 isLoading isError 变量
  • 不命名多余数据,比如现在是详情页 你的数据是 ajax 请求的,那就直接声明一个对象叫 d,而不是每个字段都声明
  • 表单数据请包裹一层 form

4.生命周期方法注意点

  • 不在 mounted | created 之类的方法写逻辑,取 ajax 数据
  • created 里面监听 Bus 事件

参考文档网址:
Vue命名规范

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • views 命名 views 文件夹下面是由 以页面为单位的vue文件 或者 模块文件夹 组成的,放在 src 目...
    你猜_19ca阅读 8,559评论 0 15
  • title: 风格指南type: style-guide 这里是官方的 Vue 特有代码的风格指南。如果在工程中使...
    ChenyuMa阅读 1,117评论 1 1
  • 这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue,为了回避错误、小纠结和反模式,该指南是份不错的...
    youins阅读 5,762评论 0 5
  • vue去哪网跟学笔记 记录学习点滴 1. 初始化项目 1.1 手机显示配适 minimum-scale=1.0,m...
    noobakong阅读 2,312评论 0 16
  • 本文章是我最近在公司的一场内部分享的内容。我有个习惯就是每次分享都会先将要分享的内容写成文章。所以这个文集也是用来...
    Awey阅读 9,488评论 4 67