命名规范不是绝对,建议:怎么方便怎么来
一、常见的命名方式
小驼峰 示例:nodeModules
大驼峰 示例:NodeModules
短横线分割 示例:node-modules
下划线分割 示例:node_modules
下划线分割+复数命名 示例:node_modules
下划线分割+大写命名 示例:CURRENT_TIME
二、vue 项目命名规范
1. 目录结构命名规范
- 项目目录命名规范
短横线分割 示例:vue2-test-demo
- 内部目录命名规范
下划线分割+复数命名 示例:views、node_modules
- 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. 文件命名规范
- vue 文件
一个单词名使用小写命名,多个单词名使用大驼峰命名
- js、ts、html、css、less、scss、图像类、文件
小驼峰
3. 方法、变量、常量命名规范
方法、变量 小驼峰
常量 下划线分割+大写命名
网友评论