Vue目录详解和文件命名规范(超详细)

框架

• Vue-cli: 3
• axios：发送请求
• Vuex：store仓库

项目目录结构

• dist：生成的打包目录

• node_modules：依赖包目录

• public： 放置系统的静态文件，比如，图片，全局配置文件

• src

  • api: 后端接口文件存放文件夹
  • assets: 放置图片，图标，css样式等静态文件
  • components: 全局公用的组件放在这里面
  • router: 路由配置文件存储文件夹
  • store: 本地仓库配置文件存储位置
  • test: 测试文件，草稿文件存放位置
  • utils: 工具类存放文件，一般只存放js文件
  • views: 放在页面展示的组件
  • styles：全局样式，我一般放在assets里

• 文件层级设置规范

  • api,components这三个文件夹里面的目录层级要完全参照views文件夹的目录层级

  • 如果出现多个页面使用的文件，则在api,components中创建public文件夹，将这类文件存放在各自的public文件夹下

文件命名规范

• views文件夹内部的文件命名规范： 一般直接由页面中文名称翻译为英文名称，英文名称第一个单词的首字母小写，后面的每个单词的首字母大写，尽量不要使用index给文件夹命名

• views文件夹内部的文件命名规范： 一般使用index.vue命名，但是在组件内的name如果 只有一个单词就首字母大写 ,如果 两个单词以上的话就第一个单词首字母小写，后面的单词首字母大写。 有时候要布局整个页面，还要加上components布局。

• api文件夹内部文件命名规范： 参照views文件夹目录结构，若存在对应的文件，则使用views中的文件名称+API作为文件名

文件内部取名规范

函数名称

• 往服务器发送数据的按钮的触发函数名： submit+自定义名称
• 不往服务器发送数据的按钮的触发函数名称：handle+自定义名称
• 关闭，取消按钮：close+自定义名称
• 自定义名称：一般跟当前执行的操作有关，比如编辑用户：handleEditUser,submitEditUser,closeEditUser

变量名称

• 必须要含有使用该变量的意义存在，不能随便取名如ahsda
• 存在多个变量意义一样的，取别名，不能使用123来区分

Css样式名称

• 要和当前的组件有联系，例如是button组件，就是button+class