Vue3+TS 项目规范及使用规范（个人见解）

1.项目搭建方面

1.1项目目录文件名

项目文件夹命名基本就和项目名称命名规则一样，有复数结构的要使用复数，例如下面这些文件src下的 assets、components、directives、utils、views，一些api 接口会放到api文件夹，interface（接口）定义在文件夹下，一些格式化的东西放format,  .vue具体处理封装成函数放actions文件夹下等，下图标出了一些，除了生成项目时默认生成的一些文件夹，自己定义的文件夹，用于存放各种用途的东西

1.2 actions、api、format、interface、store(这里使用的是Pinia)定义及使用举例（待验证好不好用）

拿个页面看看这些文件定义及使用是怎么个使用，这里拿购物车页面作为示范，其中可能有些不好的习惯，大家不用在意（因为是之前写的可能来不及更改），只需要关注我们的聚焦点（也就是标题1.2）下面具体瞧瞧

来看看cart.vue文件，随便提一提我的样式风格

我们的项目现在基本极大部分都会使员工 TailwindCss,看看使用TailwindCss之后，style样式代码基本可以直接去掉了，结果就是少了一百多行样式代码，所以我们项目的样式风格就TailwindCss为主Sass/Less为辅，具体TailwindCss怎么用可以看看其官网

接下来正式看看，我们的各个文件的定义 

首先看看.vue文件中是怎么使用各个文件的东西的，然后再各个去看各文件夹下的具体内容

.vue文件夹下的东西

actions文件夹下的东西（将具体操作放这里，让.vue文件更简洁）

api文件夹下的东西

interface文件夹下的具体东西

format 文件夹里面的东西

这个文件夹里面的东西一般是格式化相关的代码，这里就不具体举例了，其使用方式也是导入，然后通过 Format.formatPrice(10.222)就会得到10.22,一般后台管理系统会使用得多一点。

1.3项目配置文件

这块主要就是使用构建项目时生成的即可，例如像

vue.config.js、README.md等等这些就不用改变了......

2.文件、组件命名方面

2.1文件命名

2.1.1 图片文件命名

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

例如

logo.png
home_log.jpg

2.1.2 html文件命名

html文件命名其实和图片命名规则样，例如

home_view.html
login_view.html

2.1.3 css文件命名

根据自己在日常的积累过程中，发现是以短横线为分隔的命名方式，是我喜欢的，所说义就总结下来作为自己的日常开发规范了

index.css
home-view.css
login-view.css

2.1.4 js文件命名

命名方式通css文件命名规则

index.js
home-view.js
login-view.js

2.2组件命名

2.2.1 多项目复用的组件

有的组件，我们可能多个项目都会用到，所以命名的时候，我们可以使用Base作为开头，例如我们这个组件在后台管理类项目用到，在前台商城项目也用到，那我们在命名组件名称的时候就可以加一个Base作为前缀，例如

BaseDialog.vue
BaseTags.vue

2.2.2 本项目全局复用的组件

也应该使用大驼峰命名法，就如比气门scr目录下的compoments下的组件，命名时使用大驼峰法

MyTable.vue
MyForm.vue

2.2.3 各个页面组件

各个页面下的组件命名规则，使用父组件最为前缀的方式进行命名，因为编译器会按照一定规则排序我们的组件文件，并且组件命名以一般化的单词开头，以描述性的修饰词结尾，例如

Cart.vue
CartInputAdd.vue
CartInputSearch.vue
/** 一般化单词-元素/组件-动作修饰词，而且不是常用的缩写，尽量别用 */

最后总结一下，就是组件名尽量使用多单词大驼峰命名法，因为这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的

1. • 代码方面

3.1 变量、常量、方法、类型、请求接口命名

3.1.1 变量

一般使用小驼峰命名法，我的规则是使用，类型（大概意思就是属于什么的） + 描述例如

let userName = '张三' 
let loginPassword = '1997224'

3.1.2 常量

常量一般使用全大写，多个单词使用下划线，例如

const MAX_VALUE = 100
const URL = 'http://www.xxx.com'

3.1.3 方法

方法一般也是使用小驼峰命名规则，可以是动词开头，一般是动词加名词

例如

getHomeList
setPassword
postFormData

当然也可以是类似以下的词

动词	含义	返回值
is	判断是否是某个值	是：true 不是:false
can	判断是否可以xxx	可以：true 不可以:false
has	判断是否有	有：true 没有：false
set	设置	一般无返回值/返回是否设置成功
get	获取	返回获取的值

3.1.4 ts类型定义

对于vue3+ts开发,一般我们都需要进行类型定义，像我一般定义 interface的时候，就喜欢类每个接口带一个后缀Type, 代表其实一个类型，例如

interface LoginDataType {
    userName: string
    password: string
}

3.1.5 请求接口定义

我在定义请求接口的时候，也会给接口加一个Api后缀，因为这样就可以与普通方法进行区别

export const loginApi = (data)=>{
    return axios({
        url: 'xxx',
        method: 'post',
        data
    })
}

3.1.6 自定义事件及其处理方法命名

自定义事件命名一般使用on开头，主要目的就是与原生事件做区分，而事件对应处理方法则使用handle开头，代表是处理某个事件的方法，具体例子如下

<div
  @on-search="handleSearch"
  @on-clear="handleClear"
  @on-clickoutside="handleClickOutside">
</div>

3.2 注释

注释目的：

提稿代码的可读性，从而提高可维护性

注释的原则

如无必要，勿增注释

如有必要， 尽量详尽

3.2.1 html 注释

单行注释：一般用于简单的描述，如某些状态、属性描述等

<!-- 单行注释 -->
<div>...</div>

模块注释

<!-- Strat module1 --> 
<div class="module1">
  ...
</div>
<!-- End module1 -->

嵌套的注释

<!-- Strat module1 --> 
<div class="module1">
    <!-- module A -->
    <div>A</div>
    <!-- module B -->
    <div>B</div>
    <!-- module C -->
    <div>C</div>    
</div>
<!-- End module1 -->

3.2.2 css注释

行注释：行注释与行之间分隔 一行

/* test1 注释 */ 
.test1 {} 

/* test2 注释 */ 
.test2 {} 

模块注释：模块注释之间分隔两行

/* css Module A
---------------------------------------------------------------- */
.mod_a {}


/* css Module B
---------------------------------------------------------------- */
.mod_b {}

3.2.3 js注释

单行注释：其实与css hang单行注释规则类似，只不过是，符号不一样 js使用 // 作为单行注释

// js 单行注释
const active = true

模块注释：多行注释使用 /** ... */，而不是多行的 //。

/**
 * 功能
 * 参数
 * 返回值
 */
function make (tag) {
  // ...

  return element
}

3.3 其他

一般交给elint 就可以了

还有一些规范，比如说一个方法不能超过50行，嵌套不能超过5层等...

4.总结

        以上是个人的一些见解，希望对你有所帮助，当然，如果有大佬愿意指出其中不好的地方就更好了，哈哈哈