Vue3脚手架搭建（三）

• 一、脚手架目录
  • 1.简易目录结构
• 二、文件夹、组件命名规范，组件结构规范
  • 1.文件夹
  • 2.组件命名
  • 3.组件结构
  • 4.常量命名
  • 5.普通变量命名规范
  • 6.method 方法命名命名规范
• 三、组件样式
• 四、Script
• 五、编辑器配置代码格式化
  • 1. 配置编辑器（VScode为例）
• 六、注释
  • 1.单行注释
  • 2.多行注释
• 七、代码整洁案例
  • 1.html
    • 1.1.块级元素
    • 1.2.内联元素
  • 2.js

一、脚手架目录

完整代码文件

1.简易目录结构

├── node_modules        // 当前项目所有依赖，一般不可以移植给其他电脑环境 |    ├── public            |    |    ├── favicon.ico    // 标签图标 |    |    └── index.html     // 当前项目唯一的页面 |    ├── src |    |    ├── api            // 所有APi调用接口 （目录解构和views解构保持一直） |    |    ├── assets         // 静态资源img、css、js、svg |    |    ├── components     // 公共组件目录 |    |    ├── layout         // 风格组件（容器） |    |    ├── router         // 路由脚本文件（配置路由 url链接 与 页面组件的映射关系） |    |    ├── store          // 仓库脚本文件（vuex插件的配置文件，数据仓库） |    |    ├── utils          // 常用的方法封装、 构建相关工具方法 （request请求等） |    |    ├── views          // 页面(视图)组件 |    |    ├── App.vue        // 根组件 |    |    ├── main.js        // 全局脚本文件（项目的入口） |    |    ├── permission.js  // vue-rouer前端路由拦截器、权限判断等（路由守卫） |    |    ├── settings.js    // 全局变量、项目配置等 |    ├── .env.development // 开发环境配置 |    ├── .env.production  // 正式环境配置 |    ├── README.md └    └── **配置文件 ————————————————

二、文件夹、组件命名规范，组件结构规范

1.文件夹

1.文件夹名称应统一格式，小写开头、驼峰式命名，见名思意，例如：home,myWork。 2.内置业务组件以 modules/子组件 大写开头、驼峰式命名格式创建

2.组件命名

1.组件名以单词大写开头，当多个单词拼写成的组件时，采用驼峰式命名规则。一般是多个单词全拼，减少简写的情况，这样增加可读性。 2.组件应该都放到components文件夹下，单个页面独立一个文件夹，用来放相对应的vue文件以及页面相关的样式文件，样式少可直接写到页面组件里边，这样更符合组件化的思想。 3.取名案例： PascalCase (单词首字母大写命名)是最通用的**声明**约定 4.使用案例： pascal-case (短横线分隔命名) 是最通用的**使用**约定

3.组件结构

组件结构遵循从上往下template，script，style的结构。

4.常量命名

命名方法 : 全部大写 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。 案例：    const MAX_COUNT = 10 ​  const URL = 'https://www.baidu.com/'

5.普通变量命名规范

命名方法 ：驼峰命名法 命名规范 : 1.命名必须是跟需求的内容相关的词，比如说我想申明一个变量，用来表示我的学校，那么我们可以这样定义`const mySchool = "我的学校"`; 2.命名是复数的时候需要加**s**,比如说我想申明一个数组，表示很多人的名字，那么我们可以这样定义`const names = new Array()`;

6.method 方法命名命名规范

驼峰式命名，统一使用动词或者动词+名词形式

//bad   go、nextPage、show、open、login   // good   jumpPage、openCarInfoDialog

请求数据方法，以 data 结尾

//bad takeData、confirmData、getList、postForm // good getListData、postFormData

尽量使用常用单词开头（set、get、go、can、has、is）

附： 函数方法常用的动词:

get 获取/set 设置, add 增加/remove 删除 create 创建/destory 移除 start 启动/stop 停止 open 打开/close 关闭, read 读取/write 写入 load 载入/save 保存, create 创建/destroy 销毁 begin 开始/end 结束, backup 备份/restore 恢复 import 导入/export 导出, split 分割/merge 合并 inject 注入/extract 提取, attach 附着/detach 脱离 bind 绑定/separate 分离, view 查看/browse 浏览 edit 编辑/modify 修改, select 选取/mark 标记 copy 复制/paste 粘贴, undo 撤销/redo 重做 insert 插入/delete 移除, add 加入/append 添加 clean 清理/clear 清除, index 索引/sort 排序 find 查找/search 搜索, increase 增加/decrease 减少 play 播放/pause 暂停, launch 启动/run 运行 compile 编译/execute 执行, debug 调试/trace 跟踪 observe 观察/listen 监听, build 构建/publish 发布 input 输入/output 输出, encode 编码/decode 解码 encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩 pack 打包/unpack 解包, parse 解析/emit 生成 connect 连接/disconnect 断开, send 发送/receive 接收 download 下载/upload 上传, refresh 刷新/synchronize 同步 update 更新/revert 复原, lock 锁定/unlock 解锁 check out 签出/check in 签入, submit 提交/commit 交付 push 推/pull 拉, expand 展开/collapse 折叠 begin 起始/end 结束, start 开始/finish 完成 enter 进入/exit 退出, abort 放弃/quit 离开 obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集

三、组件样式

单个组件样式一般可直接写到组件下style标签下，为了防止样式污染，可添加scoped 属性，也可以通过设置作用域来防止样式污染，写样式的时候尽量少写元素选择器，为了提高代码查找速度，可以用类选择器。

四、Script

     在 script 标签中，你应该遵守 Js 的规范和ES6规范。

1. 组件名称：必须以大写字母开头驼峰法命名。

2. Data必须是一个函数。

3. Props定义：提供默认值，使用type属性校验类型，使用props之前先检查prop是否存在

4. 调试信息 console.log() debugger使用完及时删除。

5. 为v-for设置Key值。

6. 使用计算 规避v-if和v-for用在一起。

7. 无特殊情况不允许使用原生API操作dom,谨慎使用this.$refs直接操作dom。

8. 使用ES6风格编码源码,定义变量使用let,定义常量使用const,使用export,import模块化。

9. 指令缩写：都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)。

10. 使用 data 里的变量时请先在 data 里面初始化。

11. 函数中统一使用_this=this来解决全局指向问题。

12. 能用单引号不用双引号。

13. 尽量使用===。

14. 声明变量必须赋值。

五、编辑器配置代码格式化

1. 配置编辑器（VScode为例）

IDE中安装 Prettier-Code Formater[4] 插件：

 找到Vs Code中设置模块，搜索 format On Save，勾上这个就可以了。

 找到webstorm 中设置模块，javaScript-> 自动ESlint配置 保存运行

六、注释

1.单行注释

注释单独一行，不要在代码后的同一行内加注释。例如：

bad   var name =”abc”; // 姓名      good   // 姓名   var name = “abc”;

2.多行注释

组件使用说明，和调用说明

/**   * 组件名称   * @module 组件存放位置   * @desc 组件描述   * @author 组件作者   * @date 2017年12月05日17:22:43   * @param {Object} [title]    - 参数说明   * @param {String} [columns] - 参数说明   * @example 调用示例   *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable> **/

七、代码整洁案例

1.html

<!DOCTYPE html> <html lang="zh"> <head>     <title>小试牛刀-换行</title> </head> <body> <form>     <fieldset>         <legend>个人基本信息</legend>         <div>             <label>姓名：</label><input type="text">         </div>         <div>             <label>性别：</label>             <input type="radio">             男             <input type="radio"             >女         </div>         <div>             <label>年龄：</label>             <input type="number">         </div>     </fieldset>     <fieldset>         <legend>个人家庭成员信息</legend>         <div>             <label>关系：</label>         <select>          <option>父子</option>           <option>母子</option>            <option>配偶</option>            <option>儿子</option>           <option>女儿</option>             </select></div>         <div>             <label>姓名：</label><input type="text">         </div>         <div>             <label>年龄：</label><input type="number" name="age">         </div>     </fieldset> </form> </body> </html>

就上面这段表单代码，应该有不少人都遇见过类似的吧，看我是有语义化标签的，我加了语义化的，只有6个表单输入项，不到5行代码，可读性呢？应该是勉强能接受，但是我相信见过比这还烂的代码的人应该还有很多，表单项比这多的也有很多，如果在加上样式的修饰节点呢？感受到了恐惧吗？来看一下优化后的代码结构：

<!DOCTYPE html> <html lang="zh"> <head>     <title>小试牛刀-换行</title> </head> <body> <form>     <fieldset>         <legend>个人基本信息</legend>                   <div>             <label>姓名：</label>             <input type="text">         </div>                   <div>             <label>性别：</label>             <input type="radio">男             <input type="radio">女         </div>                   <div>             <label>年龄：</label>             <input type="number">         </div>     </fieldset>           <fieldset>         <legend>个人家庭成员信息</legend>                   <div>             <label>关系：</label>             <select>                 <option>父子</option>                 <option>母子</option>                 <option>配偶</option>                 <option>儿子</option>                 <option>女儿</option>             </select>         </div>                   <div>             <label>姓名：</label><input type="text">         </div>                   <div>             <label>年龄：</label><input type="number" name="age">         </div>     </fieldset> </form> </body> </html>

可读性应该要好很多，就是加上了正确的换行以及合适的缩进。

缩进我就不多说了，现在很多编辑器都自带格式化代码的功能，而且eslint也能限制代码的缩进，这里只讲换行。

1.1.块级元素

我对html换行的标准是如果标签是块级标签，并且其中有子标签（文本节点除外），它就应该和它的兄弟标签使用换行隔开，例如：

<!--  错误的示例  --> <div class="box">     <div class="box-header">         <h3>我是标题</h3>     </div>     <div class="box-body">         <p>我是内容1</p>         <p>我是内容2</p>         <p>我是内容3</p>         <p>我是内容4</p>     </div>     <div class="box-footer">         我是脚部     </div> </div> <!--  正确的示例  --> <div class="box">     <!--  块级元素有子元素，应该换行和兄弟元素隔开  -->     <div class="box-header">         <h3>我是标题</h3>     </div>           <div class="box-body">         <!--  块级元素，只有文本节点，可以不和兄弟元素隔开  -->         <p>我是内容1</p>         <p>我是内容2</p>         <p>我是内容3</p>         <p>我是内容4</p>     </div>           <!--  块级元素，只有文本节点，可以和上面的p标签一样收起，也可以像这样展开  -->     <div class="box-footer">         我是脚部     </div> </div>

块级元素还有一个标准，就是开始和结束标签都需要单独占一行，或者整个标签体占一行。

1.2.内联元素

说到内联元素其实应该还有一个行内元素，但是行内元素和内联元素的规则在我这是一样的，内联元素标签中只允许出现文本或者其它的内联元素，并且内联元素开始和结束标签必须出现在一行内，示例：

<!--  错误的示例  --> <p><span style="color: red;" >*</span>验证失败</p> <!--  半正确的示例  --> <p>     <!--  块级元素里面有标签应该换行  -->     <span style="color: red;">*</span>     验证失败 </p> <!--  正确的示例  --> <p>     <!--  这里文字不换行是因为换行之后*号和文字之间有一个空格，如果没有特别的需求不换行  -->     <span style="color: red;">*</span>验证失败 </p>

2.js

js可以说的就很多了，个人觉得js换行才是最重要的，直接上没换行的代码吧：

function submitForm() {     var name = document.getElementById('name').value;     var age = document.getElementById('age').value;     var gender = document.getElementById('gender').value;     gender = gender === '1' ? '男' : '女';     var address = document.getElementById('address').value;     var telNum = document.getElementById('telNum').value;     if (!name) return alert('姓名必填');     var xhr = new XMLHttpRequest();     xhr.open('POST', 'http://ip:port');     xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded');     xhr.send({         name: name,         age: age,         gender: gender,         address: address,         telNum: telNum     });     xhr.onreadystatechange = function () {         if (xhr.readyState === 4) {             if (xhr.status === 200) {                 alert('保存成功')             }         }     } }

就这代码不过25行，我估计想仔细看的人不多，上优化后的：

function submitForm() {     // 姓名必填     var name = document.getElementById('name').value;     if (!name) return alert('姓名必填');     // 格式化性别     var gender = document.getElementById('gender').value;     gender = gender === '1' ? '男' : '女';     // 获取表单其他元素     var age = document.getElementById('age').value;     var address = document.getElementById('address').value;     var telNum = document.getElementById('telNum').value;     // 创建请求链接     var xhr = new XMLHttpRequest();     xhr.open('POST', 'http://ip:port');     xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded');     // 发送数据     var data = {         name: name,         age: age,         gender: gender,         address: address,         telNum: telNum     };     xhr.send(data);     // 监听响应     xhr.onreadystatechange = function () {         if (xhr.readyState === 4) {             if (xhr.status === 200) {                 alert('保存成功')             }         }     } }