项目readme(2)

环境准备

首先需要安装 node，并确保 node 版本是 12.x 版本或以上。推荐使用 nvm 来管理 node 版本，windows 用户可以参考 nvm-windows 进行安装。以 mac 安装为例：

$ curl https://raw.githubusercontent.com/cnpm/nvm/master/install.sh | bash

# 增加以下内容到 ~/.bashrc 或者 ~/.zshrc
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

# 使用 nvm 安装 node 的 14.17.6 版本
$ nvm install 14.17.6

# 使用 14.17.6 版本
$ nvm use 14.17.6

# 验证 node 是否安装成功
$ node -v
v14.17.6
$ npm -v
6.14.15

nrm – NPM registry manager

如果经常需要切换 npm 镜像源，推荐使用 nrm 进行管理，默认包含：

• npm
• yarn
• cnpm
• taobao
• nj
• npmMirror

全局安装

$ npm install -g nrm

参考示例

$ nrm ls

* npm -----  https://registry.npmjs.org/
  yarn ----- https://registry.yarnpkg.com
  cnpm ----  http://r.cnpmjs.org/
  taobao --  https://registry.npm.taobao.org/
  nj ------  https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/

$ nrm use cnpm  //switch registry to cnpm

    Registry has been set to: http://r.cnpmjs.org/

使用方法

Usage: nrm [options] [command]

  Commands:

    ls                                    List all the registries
    current                               Show current registry name
    use <registry>                        Change registry to registry
    add <registry> <url> [home]           Add one custom registry
    login <registry> [value]              Set authorize information for a registry with a base64 encoded string or username and pasword
      -a  --always-auth                     Set is always auth
      -u  --username <username>             Your user name for this registry
      -p  --password <password>             Your password for this registry
      -e  --email <email>                   Your email for this registry
    set-hosted-repo <registry> <value>    Set hosted npm repository for a custom registry to publish packages
    del <registry>                        Delete one custom registry
    home <registry> [browser]             Open the homepage of registry with optional browser
    test [registry]                       Show the response time for one or all registries
    publish [<tarball>|<folder>]          Publish package to current registry if current registry is a custom registry.  if you\'re not using custom registry, this command will run npm publish directly
      -t --tag [tag]                        Add tag
      -a --access <public|restricted>       Set access
      -o --otp [otpcode]                    Set otpcode
      -dr --dry-run                         Set is dry run
    help                                  Print this help

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

镜像源

• npm
• yarn
• cnpm
• taobao
• nj(nodejitsu)
• npmMirror

nodemon

Nodemon 是一款非常实用的工具，用来监控你 node.js 源代码的任何变化和自动重启你的服务器。

全局安装

$ npm install -g nodemon

快速上手

host 映射

127.0.0.1    local.xxxx.com

安装依赖

$ npm install

启动项目

• webpack 模式

$ npm run dev

✔ Webpack
  Compiled successfully in 16.02s



 DONE  Compiled successfully in 16130ms

• vite 模式

$ npm run vite:dev

  vite v2.9.12 dev server running at:

  > Network:  http://192.168.1.11:3001/
  > Local:    http://local.xxxx.com:3001/

  ready in 2756ms.

启动同步调试

$ npm run sync

✔ Webpack
  Compiled successfully in 15.15s



 DONE  Compiled successfully in 15266ms                                                                                                        4:05:01 PM

[Browsersync] Proxying: http://localhost:8081
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://10.73.15.6:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -----------------------------------

部署发布

构建

• webpack 模式

$ npm run build:dev

✔ Webpack
  Compiled successfully in 19.56s

• vite 模式

$ npm run vite:build:dev

  vite v2.9.12 building for dev...
  transforming...

✓ 31 modules transformed.
rendering chunks...
dist/assets/logo.03d6d6da.png    6.69 KiB
dist/public\index.html           4.70 KiB
dist/assets/index.72cbaf5c.js    0.66 KiB / gzip: 0.43 KiB
dist/assets/async.1729ea5f.js    0.40 KiB / gzip: 0.29 KiB
dist/assets/index.ae41e5de.css   0.25 KiB / gzip: 0.20 KiB
dist/assets/index.3d6b298e.js    199.60 KiB / gzip: 70.41 KiB

发布

$ npm run deploy:dev

技术选型

Vue 2.x + Vue-router 3.x + Vuex + Vue-i18n + Axios + Mock

文档

• vue The progressive JavaScript framework for building modern web UI
• vue-router The official router for Vue.js
• vuex State management for Vue.js
• vue-i18n Internationalization plugin for Vue.js
• axios Promise based HTTP client for the browser and node.js
• mock Load a module with it’s require’s mocked out
• echarts Apache ECharts is a powerful, interactive charting and data visualization library for browser
• highcharts JavaScript charting framework
• d3 An arbitrary-precision Decimal type for JavaScript
• tailwindcss A utility-first CSS framework for rapidly building custom user interfaces

社区精选工具库

• dayjs 2KB immutable date time library alternative to Moment.js with the same modern API
• decimal.js An arbitrary-precision Decimal type for JavaScript
• deepmerge A library for deep (recursive) merging of Javascript objects
• driver.js A light-weight, no-dependency, vanilla JavaScript library to drive the user’s focus across the page
• dropzone Handles drag and drop of files for you.
• file-saver An HTML5 saveAs() FileSaver implementation
• js-cookie A simple, lightweight JavaScript API for handling cookies
• lodash Lodash modular utilities
• screenfull Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen
• xlsx SheetJS Spreadsheet data parser and writer
• svg-path-properties Calculate the length for an SVG path, to use it with node or a Canvas element

社区精选组件

• vue-count-to It’s a vue component that will count to a target number at a specified duration
• vue-splitpane Vue split-pane component
• vuedraggable Draggable component for vue

目录结构

├─ dist/ # 构建产物
├─ docs/ # 文档
├─ report # 报告产物
| ├─ jscpd-badge.svg
| └── jscpd-report.json
├─ src/ # 源码
| ├─ assets/ # 静态文件夹
| | ├─ images/ # 图片
| ├─ components/ # 自定义业务组件
| | ├─ header/ # header
| | ├── locale/ # 国际化配置
| | ├── index.vue # 组件路口
| | ├── index.scss # 组件样式
| | └── **tests**/ # 测试用例
| | ├─ sidebar/ # 侧边导航
| | ├─ table/ # table
| ├─ constants/ # 常量
| | └─ index.js
| ├─ directives/ # 指令
| | └─ index.js
| ├─ filters/ # 过滤器
| | └─ index.js
| ├─ i18n # 国际化
| | ├─ en/ # 英文
| | ├─ ja/ # 日文
| | ├─ zh/ # 中文
| | ├─ index.js # 入口
| ├─ interceptor/ # axios 拦截器配置
| | └─ index.js
| ├─ mixins/ # 混入
| | └─ index.js
| ├─ mock/ # 本地模拟数据
| | └─ index.js
| ├─ routers/ # 路由配置
| | ├─ module/ # 子路由
| | └─ index.js
| ├─ stores/ # 状态管理
| | └─ index.js
| ├─ utils/ # 工具类
| | └─ index.js
| ├─ views/ # 页面
| | ├─ home/ # Home 页面
| | ├── components/ # 组件
| | ├── index.vue # 页面入口
| | ── index.scss # 页面样式
| ├─ favicon.ico # favicon 图标
| ├─ index.html # 应用入口 HTML
| ├─ index.js # 应用入口
| ├─ index.scss # 全局样式
├─ .browserslistrc # 浏览器兼容配置
├─ .env.dev # dev 环境配置
├─ .env.local # 本地环境配置
├─ .env.prd # 生产环境配置
├─ .env.sit # sit 环境配置
├─ .env.uat # uat 环境配置
├─ .eslintcache # eslint 缓存
├─ .eslintignore # eslint 忽略配置
├─ .eslintrc # eslint 配置
├─ .gitignore # git 配置
├─ .htmllintrc # htmllint 配置
├─ .npmrc # npm 配置
├─ .postcssrc.js # postcss 配置
├─ .prettierignore # prettier 忽略配置
├─ .prettierrc # prettier 配置
├─ .stylelintcache # stylelint 缓存
├─ .stylelintignore # stylelint 忽略配置
├─ .stylelintrc # stylelint 配置
├─ babel.config.js # babel 配置
├─ commitlint.config.js # commitlint 配置
├─ deploy.js # 发布配置
├─ jsconfig.json # vscode 配置
├─ package.json # 依赖管理
├─ proxy.js # 本地代理配置
├─ README.md # 文档
├─ tailwind.config.js # tailwind 配置
├─ vite.config.js # vite 配置
├─ webpack.base.js # webpack 基础配置
├─ webpack.dev.js # webpack 本地开发配置
├─ webpack.prod.js # webpack 构建配置
├─ webpack.server.js # webpack 开发配置
├─ webpack.sync.js # webpack 同步调试配置

命名规范

项目命名

全部采用小写方式， 以中划线分隔。例：my-project-name

目录命名

参照项目命名规则。
有复数结构时，要采用复数命名法。
例：scripts、styles、images、data-models

HTML 文件命名

参照项目命名规则。
例：error-report.html

CSS 文件命名

参照项目命名规则。
例：retina-sprites.css

JS 文件命名

参照项目命名规则。
例：account-model.js

HTML 规范

语法

• 缩进使用 soft tab（2 个空格）；
• 嵌套的节点应该缩进；
• 在属性上，使用双引号，不要使用单引号；
• 属性名全小写，用中划线做分隔符；
• 不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；
• 不要忽略可选的关闭标签，例：</li> 和 </body>。

HTML5 DOCTYPE

在页面开头使用这个简单地 DOCTYPE 来启用标准模式，使其在每个浏览器中尽可能一致的展现；

虽然 DOCTYPE 不区分大小写，但是按照惯例，DOCTYPE 大写 （关于 DOCTYPE 属性，大写还是小写）。

lang 属性

根据 HTML5 规范：

应在 html 标签上加上 lang 属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。

更多关于 lang 属性的说明在这里；
在 sitepoint 上可以查到语言列表；
但 sitepoint 只是给出了语言的大类，例如中文只给出了 zh，但是没有区分香港，台湾，大陆。而微软给出了一份更加详细的语言列表，其中细分了 zh-cn、 zh-hk、zh-tw。

字符编码

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为 “UTF-8”。

IE 兼容模式

用 标签可以指定页面应该用什么版本的 IE 来渲染；
如果你想要了解更多，请点击这里；
不同 DOCTYPE 在不同浏览器下会触发不同的渲染模式（这篇文章总结的很到位）。

引入 CSS、JS

根据 HTML5 规范, 通常在引入 CSS 和 JS 时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。

HTML5 规范链接

• 使用 link
• 使用 style
• 使用 script

属性顺序

属性应该按照特定的顺序出现以保证易读性；

• class
• id
• name
• data-*
• src、for、type、href、value、max-length、max、min、pattern
• placeholder、title、alt
• aria-*、role
• required、readonly、disabled

class 是为高可复用组件设计的，所以应处在第一位；
id 更加具体且应该尽量少使用，所以将它放在第二位。

boolean 属性

boolean 属性指不需要声明取值的属性，XHTML 需要每个属性声明取值，但是 HTML5 并不需要；

更多内容可以参考 WhatWG section on boolean attributes：

boolean 属性的存在表示取值为 true，不存在则表示取值为 false。

JS 生成标签

在 JS 文件中生成标签让内容变得更难查找，更难编辑，性能更差。
应该尽量避免这种情况的出现。

减少标签数量

在编写 HTML 代码时，需要尽量避免多余的父节点；
很多时候，需要通过迭代和重构来使 HTML 变得更少。

实用高于完美

尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

CSS 规范

ClassName 的命名应该尽量精短、明确。严格使用 BEM 规则。

缩进

使用 soft tab（2 个空格）。

分号

每个属性声明末尾都要加分号。

空格

以下几种情况不需要空格：

• 属性名后
• 多个规则的分隔符 “,” 前
• !important “!” 后
• 属性值中 “(” 后和 “)” 前
• 行末不要有多余的空格

以下几种情况需要空格：

• 属性值前
• 选择器 “>”、 “+”、“~” 前后
• “{” 前
• !important “!” 前
• @else 前后
• 属性值中的 “,” 后
• 注释 “/" 后和 "/” 前

空行

以下几种情况需要空行：

• 文件最后保留一个空行
• “}” 后最好跟一个空行，包括 scss 中嵌套的规则
• 属性之间需要适当的空行

换行

以下几种情况不需要换行：

• “{” 前

以下几种情况需要换行：

• “{” 后和 “}” 前
• 每个属性独占一行
• 多个规则的分隔符 “,” 后

注释

• 注释统一用 “/* */”（scss 中也不要用 “//”）
• 缩进与下一行代码保持一致
• 可位于一个代码行的末尾，与代码间隔一个空格

引号

• 最外层统一使用双引号
• url 的内容要用引号
• 属性选择器中的属性值需要引号

命名

• 类名使用小写字母，以中划线 “-” 分隔
• id 采用驼峰式命名
• scss 中的变量、函数、混合、placeholder 采用驼峰式命名

属性声明顺序

具体见 .stylelintrc

颜色

• 颜色十六进制用小写字母
• 颜色十六进制尽量用简写

属性简写

属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰；
margin 和 padding 相反，需要使用简写；
常见的属性简写包括：

• font
• background
• transition
• animation

媒体查询

尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。

SCSS 相关

提交的代码中不要有 @debug；
声明顺序：

• @extend
• 不包含 @content 的 @include
• 包含 @content 的 @include
• 自身属性

嵌套规则

• @import 引入的文件不需要开头的 “_” 和结尾的 “.scss”；
• 嵌套最多不能超过 5 层；
• @extend 中使用 placeholder 选择器；
• 去掉不必要的父级引用符号 “&”。

杂项

• 不允许有空的规则
• 元素选择器用小写字母
• 去掉数字中不必要的小数点和末尾的 0
• 属性值 “0” 后面不要加单位
• 同个属性不同前缀的写法需要在垂直方向保持对齐
• 无前缀的标准属性应该写在有前缀的属性后面
• 不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系
• 不要在一个文件里出现两个相同的规则
• 用 border: 0; 代替 border: none;
• 选择器不要超过 4 层（在 scss 中如果超过 4 层应该考虑用嵌套的方式来写）
• 发布的代码中不要有 @import
• 尽量少用 “*” 选择器

JavaScript 规范

缩进

使用 soft tab（2 个空格）。

单行长度

不要超过 80，但如果编辑器开启 word wrap 可以不考虑单行长度。

分号

以下几种情况后需加分号：

• 变量声明
• 表达式
• return
• throw
• break
• continue
• do-while
• 空格

以下几种情况不需要空格：

• 对象的属性名后
• 前缀一元运算符后
• 后缀一元运算符前
• 函数调用括号前
• 无论是函数声明还是函数表达式，"("前不要空格
• 数组的"[“后和”]"前
• 对象的"{“后和”}"前
• 运算符"(“后和”)"前

以下几种情况需要空格：

• 二元运算符前后
• 三元运算符"?:"前后
• 代码块"{"前
• 下列关键字前：else、while、catch、finally
• 下列关键字后：if、else、for、while、do、switch、case、try、catch、finally、with、return、typeof
• 单行注释 “//” 后（若单行注释和代码同行，则 “//” 前也需要）
• 多行注释 “*” 后
• 对象的属性值前
• for 循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格
• 无论是函数声明还是函数表达式，“{” 前一定要有空格
• 函数的参数之间

空行

以下几种情况需要空行：

• 变量声明后（当变量声明在代码块的最后一行时，则无需空行）
• 注释前（当注释在代码块的第一行时，则无需空行）
• 代码块后（在函数调用、数组、对象中则无需空行）
• 文件最后保留一个空行

换行

换行的地方，行末必须有 “,” 或者运算符；

以下几种情况不需要换行：

• 下列关键字后：else、catch、finally
• 代码块 “{” 前

以下几种情况需要换行：

• 代码块 “{” 后和 “}” 前
• 变量赋值后

单行注释

• 双斜线后，必须跟一个空格
• 缩进与下一行代码保持一致
• 可位于一个代码行的末尾，与代码间隔一个空格

多行注释

最少三行, “*” 后跟一个空格；

建议在以下情况下使用：

• 难于理解的代码段
• 可能存在错误的代码段
• 浏览器特殊的 HACK 代码
• 业务逻辑强相关的代码

文档注释

各类标签 @param, @method 等请参考 usejsdoc 和 JSDoc Guide；

建议在以下情况下使用：

• 所有常量
• 所有函数
• 所有类

引号

最外层统一使用单引号。

变量命名

• 标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到 cgi 返回的数据）
• “ID” 在变量名中全大写
• “URL” 在变量名中全大写
• “Android” 在变量名中大写第一个字母
• “iOS” 在变量名中小写第一个，大写后两个字母
• 常量全大写，用下划线连接
• 构造函数，大写第一个字母
• jquery 对象必须以 “$” 开头命名

变量声明

一个函数作用域中所有的变量声明尽量提到函数首部，用一个 var 声明，不允许出现两个连续的 var 声明。

函数

• 无论是函数声明还是函数表达式，“(” 前不要空格，但 “{” 前一定要有空格
• 函数调用括号前不需要空格
• 立即执行函数外必须包一层括号
• 不要给 inline function 命名
• 参数之间用 ", " 分隔，注意逗号后有一个空格

数组、对象

• 对象属性名不需要加引号
• 对象以缩进的形式书写，不要写在一行
• 数组、对象最后要有逗号

括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if、else、for、while、do、switch、try、catch、finally、with。

null

适用场景：

• 初始化一个将来可能被赋值为对象的变量
• 与已经初始化的变量做比较
• 作为一个参数为对象的函数的调用传参
• 作为一个返回对象的函数的返回值

不适用场景：

• 不要用 null 来判断函数调用时有无传参
• 不要与未初始化的变量做比较

undefined

永远不要直接使用 undefined 进行变量判断；
使用 typeof 和字符串 “undefined” 对变量进行判断。

eslint

• 用 “=“、”!” 代替 “==”、“!=”
• for-in 里一定要有 hasOwnProperty 的判断
• 不要在内置对象的原型上添加方法，如 Array、Date
• 不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量
• 变量不要先使用后声明
• 不要在一句代码中单单使用构造函数，记得将其赋值给某个变量
• 不要在同个作用域下声明同名变量
• 不要在一些不需要的地方加括号，例：delete(a.b)
• 不要使用未声明的变量（全局变量需要加到 .eslintrc 文件的 globals 属性里面）
• 不要声明了变量却不使用
• 不要在应该做比较的地方做赋值
• debugger 不要出现在提交的代码里
• 数组中不要存在空元素
• 不要在循环内部声明函数
• 不要像这样使用构造函数，例：new function () { … }, new Object

杂项

• 不要混用 tab 和 space
• 不要在一处使用多个 tab 或 space
• 换行符统一用 “LF”
• 对上下文 this 的引用只能使用 “_this”、“that”、“self” 其中一个来命名
• 行尾不要有空白字符
• switch 的 falling through 和 no default 的情况一定要有注释特别说明
• 不允许有空的代码块

静态检测

HTML 检测

HTML 需遵从 htmllint 规范, 具体配置见 .htmllintrc。

css 检测

项目使用 scss 预处理。

样式需遵从 stylelint 规范, 具体配置见 .stylelintrc。

JavaScript 检测

JSX 是一个 JavaScript 的语法扩展。

js/jsx 需遵从 ESLint 规范，具体配置见 .eslintrc。

git 分支规范

• feature/pbi/xxx 版本迭代分支
• hotfix/xxx 缺陷修复分支
• release/dev 自测分支
• release/sit 测试分支
• release/uat 预生产分支
• master 生产分支

commit 规范

<type>(<scope>): <subject> // 必填, 描述主要修改类型和内容。注意冒号后面有空格
<BLANK LINE>
<body> // 描述为什么修改, 做了什么样的修改, 以及开发的思路等等
<BLANK LINE>
<footer> // 放 Breaking Changes 或 Closed Issues

• type 必填，commit 的类型，主要包含下面几种：
  • feat 新功能
  • fix 修复 bug
  • refactor 重构
  • style 格式修改, 注意不是 css 修改
  • docs 文档修改
  • chore 其他修改, 比如改变构建流程、或者增加依赖库、工具等
  • build 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
  • ci 持续集成相关的修改
  • test 测试用例修改
  • perf 优化相关，比如提升性能、体验
  • revert 回滚
• scope 选填，commit 影响的范围, 比如: route, component, utils, build…
• subject 必填，commit 的简短描述，格式可以参考 50/72 formatting
• body 选填，commit 的具体修改内容, 可以分为多行
• footer 选填，备注信息，通常是 Breaking Changes 或 Closed Issues