vue 、js 命名规范

2023-12-19  本文已影响0人  暴躁程序员

命名规范不是绝对,建议:怎么方便怎么来

一、常见的命名方式

小驼峰                       示例:nodeModules              
大驼峰                       示例:NodeModules
            
短横线分割                   示例:node-modules              
下划线分割                   示例:node_modules   

下划线分割+复数命名           示例:node_modules 
下划线分割+大写命名           示例:CURRENT_TIME 

二、vue 项目命名规范

1. 目录结构命名规范

  1. 项目目录命名规范
短横线分割                   示例:vue2-test-demo
  1. 内部目录命名规范
下划线分割+复数命名          示例:views、node_modules
  1. vue 常见目录结构
// 参考资料:https://www.kancloud.cn/henrycao/ctos3/1782562
├── dist                  # 运行npm build,编译后生成的代码存放目录
├── node_modules          # npm本地依赖包
├── public                # 该目录下的静态资源会被复制到输出目录(dist)中,不经过 webpack处理
├── src
│   ├── api               # 与后端交互使用相关方法,接口定义
│   ├── assets            # 放置一些静态资源,例如图片,图标,字体等
│   ├── components        # 公共组件  
│   ├── lang              # 国际化多语言定义 
│   ├── router            # vue-router相关配置 https://router.vuejs.org/zh/guide/
│   ├── store             # vuex 相关配置 https://vuex.vuejs.org/zh/
│   ├── styles            # 公共样式定义
│   ├── theme             # 主题定义
│   ├── utils             # 工具类定义,详细请阅读“工具类”部分介绍
│   ├── views             # 所有的路由组件,业务功能开发
│   ├── App.vue           # 路由组件的顶层路由
│   └── main.js           # vue入口文件
├── tests                 # 测试
├── .browserslistrc       # 指定项目的目标浏览器的范围,查看“配置项-目标浏览器”了解
├── .env                  # 环境变量配置,详细请阅读“环境变量和模式”部分介绍
├── .gitignore            # 配置不提交到git仓库的文件
├── postcss.config.js     # 配置rem转换,查看“配置项 - postcss.config.js”了解https://www.npmjs.com/package/postcss-px2rem
└── vue.config.js         # 配置文件,详细请阅读“配置项-vue.config.js”部分

2. 文件命名规范

  1. vue 文件
一个单词名使用小写命名,多个单词名使用大驼峰命名
  1. js、ts、html、css、less、scss、图像类、文件
小驼峰                

3. 方法、变量、常量命名规范

方法、变量                    小驼峰
常量                          下划线分割+大写命名
上一篇 下一篇

猜你喜欢

热点阅读