| Vue3+TS 项目规范及使用规范（个人见解） | 您所在的位置：网站首页 › vue3接口怎么写 › Vue3+TS 项目规范及使用规范（个人见解） |
Vue3+TS 项目规范及使用规范（个人见解）
|
1.项目搭建方面
1.1项目目录文件名
项目文件夹命名基本就和项目名称命名规则一样，有复数结构的要使用复数，例如下面这些文件src下的 assets、components、directives、utils、views，一些api 接口会放到api文件夹，interface（接口）定义在文件夹下，一些格式化的东西放format, .vue具体处理封装成函数放actions文件夹下等，下图标出了一些，除了生成项目时默认生成的一些文件夹，自己定义的文件夹，用于存放各种用途的东西
拿个页面看看这些文件定义及使用是怎么个使用，这里拿购物车页面作为示范，其中可能有些不好的习惯，大家不用在意（因为是之前写的可能来不及更改），只需要关注我们的聚焦点（也就是标题1.2）下面具体瞧瞧 来看看cart.vue文件，随便提一提我的样式风格
我们的项目现在基本极大部分都会使员工 TailwindCss,看看使用TailwindCss之后，style样式代码基本可以直接去掉了，结果就是少了一百多行样式代码，所以我们项目的样式风格就TailwindCss为主Sass/Less为辅，具体TailwindCss怎么用可以看看其官网
接下来正式看看，我们的各个文件的定义 首先看看.vue文件中是怎么使用各个文件的东西的，然后再各个去看各文件夹下的具体内容 .vue文件夹下的东西
这个文件夹里面的东西一般是格式化相关的代码，这里就不具体举例了，其使用方式也是导入，然后通过 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 元素名称都是单个单词的 代码方面 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开头，代表是处理某个事件的方法，具体例子如下 3.2 注释注释目的： 提稿代码的可读性，从而提高可维护性 注释的原则 如无必要，勿增注释 如有必要， 尽量详尽 3.2.1 html 注释单行注释：一般用于简单的描述，如某些状态、属性描述等 ...模块注释 ...嵌套的注释 A B C 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.总结以上是个人的一些见解，希望对你有所帮助，当然，如果有大佬愿意指出其中不好的地方就更好了，哈哈哈 |
【本文地址】