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

  • A+
所属分类:脚本语言

框架

  • 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
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin