🚀🚀🚀vue3文件声明规范

参考vue风格指南: v2.cn.vuejs.org/v2/style-gu…

👀 常用声明方式

大驼峰式命名法 TheButon

小驼峰式命名法 theButton

短横线 the-button

下划线 the_button

⚡ 项目目录

my-project-name/
|- node_modules  *// 下载的依赖包*
|- public     *// 静态页面目录*
  |- index.html *// 项目入口*
|- src      *// 源码目录*
  |- api    *// 接口请求目录*
  |- assets   *// 静态资源目录，这里的资源会被wabpack构建*
    |- icon  *// icon 存放目录*
    |- img  *// 图片存放目录*
    |- js   *// 公共 js 文件目录*
    |- scss  *// 公共样式 scss 存放目录*
      |- frame.scss  *// 入口文件*
      |- global.scss *// 公共样式*
      |- reset.scss  *// 重置样式*
  |- components   *// 组件*
  |- plugins    *// 插件*
  |- router     *// 路由*
  |- routes     *// 详细的路由拆分目录（可选）*
    |- index.js
  |- store     *// 全局状态管理*
  |- utils     *// 工具存放目录*
    |- request.js *// 公共请求工具*
  |- views     *// 页面存放目录*
  |- App.vue    *// 根组件*
  |- main.js    *// 入口文件*
  |- tests     *// 测试用例*
  |- .browserslistrc*// 浏览器兼容配置文件*
  |- .editorconfig *// 编辑器配置文件*
  |- .eslintignore *// eslint 忽略规则*
  |- .eslintrc.js  *// eslint 规则*
  |- .gitignore   *// git 忽略规则*
  |- babel.config.js *// babel 规则*
  |- Dockerfile *// Docker 部署文件*
  |- package-lock.json
  |- package.json *// 依赖*
  |- README.md *// 项目文档 README*
  |- vue.config.js *// webpack 配置* or vite.config.js //vite配置

🐣 图像文件名

全部采用小写方式， 优先选择单个单词命名，多个单词命名以下划线分隔。

例：logo、logo_head、logo_title

🐟 css文件名

全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。

例：reset、public-vant、public-element

🌞 JavaScript文件名

全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。

例：utils、high-light、day-format

📢 components公共组件

采用大驼峰方式，如只使用一次The开头。

例：Button、FormList、TableList、TheTable

📕 vue文件name

虽然vue3 setup里面东西已经不常用了，但是递归组件自身时依然需要使用

这个组件必须要含有 name 这个属性，如果没有 name 这个属性会造成控件自身不能调用自身，而且调用的时候最好绑定一个 key 值，因为这个 key 值是唯一的标识

<script>
export default {
  name: 'TableList',
};
</script>

⛳ props规范

父组件 
<TabliList :column-data="cloumnData"></TabliList>

子组件

defineProps:{
	cloumnData:{
	type:Arrray,
	default:()=>[]
	}
}

🎹 route路由

{
 path: '/user-info', *// 短横线方式
 name: 'UserInfo',//大驼峰
 component: UserInfo,
 meta: {
  title: '用户'
 }
},

🍟 变量

• 命名方法：camelCase

• 命名规范：类型 + 对象描述或属性的方式

  let companyData = "XX"
  

🍔 常量

• 命名方法：全部大写下划线分割

• 命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词

  const MAX_COUNT=1
  

🍕 事件方法

• 命名方法：camelCase

• 命名规范：handle + 名称（可选）+ 动词

  父组件<MyComponent @my-event="handleDoSomething" />子组件 emit('my-event')