# nuxt-project

**Repository Path**: Mrzou1688/nuxt-project

## Basic Information

- **Project Name**: nuxt-project
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-26
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [kw-payment](#kw-payment)
  - [后台给出的接口 code 规范](#%E5%90%8E%E5%8F%B0%E7%BB%99%E5%87%BA%E7%9A%84%E6%8E%A5%E5%8F%A3-code-%E8%A7%84%E8%8C%83)
  - [后台支付签名中的坑](#%E5%90%8E%E5%8F%B0%E6%94%AF%E4%BB%98%E7%AD%BE%E5%90%8D%E4%B8%AD%E7%9A%84%E5%9D%91)
  - [消除回车换行格式问题](#%E6%B6%88%E9%99%A4%E5%9B%9E%E8%BD%A6%E6%8D%A2%E8%A1%8C%E6%A0%BC%E5%BC%8F%E9%97%AE%E9%A2%98)
  - [css 规范](#css-%E8%A7%84%E8%8C%83)
  - [common 组件规范](#common-%E7%BB%84%E4%BB%B6%E8%A7%84%E8%8C%83)
  - [components 组件规范](#components-%E7%BB%84%E4%BB%B6%E8%A7%84%E8%8C%83)
  - [plugins 规范](#plugins-%E8%A7%84%E8%8C%83)
  - [transformers 规范](#transformers-%E8%A7%84%E8%8C%83)
  - [utils 规范](#utils-%E8%A7%84%E8%8C%83)
  - [git commit 规范](#git-commit-%E8%A7%84%E8%8C%83)
  - [Build Setup](#build-setup)
  - [添加 sass](#%E6%B7%BB%E5%8A%A0-sass)
  - [添加 husky + commitlint](#%E6%B7%BB%E5%8A%A0-husky--commitlint)
  - [webstorm+Prettier+ESLint 实现保存格式化代码](#webstormprettiereslint-%E5%AE%9E%E7%8E%B0%E4%BF%9D%E5%AD%98%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81)
  - [添加 vant](#%E6%B7%BB%E5%8A%A0-vant)
  - [添加 rem 支持](#%E6%B7%BB%E5%8A%A0-rem-%E6%94%AF%E6%8C%81)
- [autoprefixer](#autoprefixer)
  - [添加 Ts](#%E6%B7%BB%E5%8A%A0-ts)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# kw-payment

> 支付的重构项目，所有支付相关的重构都放这里

## 后台给出的接口 code 规范

- [doc => apiCode 规范](doc/apiCode.md)

## 后台支付签名中的坑

- 支付接口： /sppay/prescription, 返回签名参数 timeStamp 中的 **s** 是大写
- 微信 chooseWXPay 接口要求的是小写 timestamp

## 消除回车换行格式问题

```bash
git config --global core.autocrlf false
```

## css 规范

- [assets => css 规范](assets/README.md)

## common 组件规范

- [组件规范文档地址](common/README.md)

## components 组件规范

- [组件规范文档地址](components/README.md)

## plugins 规范

- [plugins 规范文档地址](plugins/README.md)

## transformers 规范

- [transformers 规范文档地址](transformers/README.md)

## utils 规范

- [utils 规范文档地址](utils/README.md)

## git commit 规范

```javascript
/**
 * 自定义规范
 * commit message的格式: 包括三个字段：type（必需）、scope（可选）和subject（必需）
 *   type: 注意冒号后面要留空格,
 *   scope: 可以省略；用于说明 commit 的影响范围，比如数据层、控制层、视图层等等，视项目不同而不同
 *
 *   subject：subject 是 commit 目的的简短描述，不超过50个字符, 不能以大写字母开头
 *   以动词开头，使用第一人称现在时，比如change，而不是changed或changes第一个字母小写
 *   结尾不加句号（.）
 *
 *   如：git commit -m "feat(): 添加commitlint"
 *   有一种比较特殊的情况： revert, 如果当前 commit 用于撤销以前的 commit，则必须以revert:开头，后面跟着被撤销 Commit 的 Header
 *   如：revert: feat(pencil): add 'graphiteWidth' option
 *
 * feat: 新特性 (feature)
 * fix: bug 修复
 * opt: 优化
 * style: 格式 (不影响代码运行的变动)
 * docs: 文档
 * test: 测试用例新增
 * refactor: 重构
 * chore：构建过程或辅助工具的变动
 * revert: 回滚到上一个版本
 *
 * 每个规则配置分为三个主要部分: <规则名>: [{Level}, {Applicable}, {Value}].
 * Level:
 *     0 表示不启用;
 *    1 表示启用但是会提示警告信息而不中断提交;
 *    2 表示启用并以错误信息提示, 中断提交过程.
 * Applicable: always | never
 * Value: 值
 * */
```

## Build Setup

```bash
# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate
```

## 添加 sass

```
yarn add css-loader node-sass postcss-loader sass-loader style-loader -D
```

## 添加 husky + commitlint

```bash
yarn add --save-dev @commitlint/config-conventional @commitlint/cli
yarn add --dev husky
echo > commitlint.config.js
  module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
       'type-enum': [2, 'always', [
                'feat','fix','style','docs','test','refactor', 'chore', 'revert'
              ]]
    }
  };
创建 .huskyrc
"hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
```

## webstorm+Prettier+ESLint 实现保存格式化代码

```
Prettier
File” >> "Settings" >> "Tools" >> "File Watchers" >> 新建 Prettier

Any
All Places
$ProjectFileDir$\node_modules\.bin\prettier.cmd
--write $FilePathRelativeToProjectRoot$
$FilePathRelativeToProjectRoot$
$ProjectFileDir$

ESLint
File” >> "Settings" >> "Tools" >> "File Watchers" >> 新建 ESLint

Any
All Places
$ProjectFileDir$\node_modules\.bin\eslint.cmd
--fix $FilePathRelativeToProjectRoot$
$FilePathRelativeToProjectRoot$
$ProjectFileDir$

关闭自动保存
File” >> "Settings" >> "Tools" >> "File Watchers" >> Prettier || ESLint
关掉 Auto-save edited files to trigger the watcher

File” >> "Settings" >> "Appearance & Behavior" >> "system settings"
关掉 synchronization下面的四个选项
```

## 添加 vant

```bash
yarn add vant
yarn add babel-plugin-import less less-loader -D

// webpack
build: {
  // 添加这个是关键，添加后babel才会处理依赖包vant里面的代码
  transpile: [/vant.*?less/],
  babel: {
     plugins: [
        [
           'import',
           {
              libraryName: 'vant',
              style: (name) => {
                 return `${name}/style/less.js`
              }
          },
          'vant'
        ]
     ]
  }
}

// 主题定制, 在build下插入loaders
less-loader不能用6.0，刚升级的有兼容问题，改用5.0
https://github.com/ant-design/ant-design-landing/issues/235

$ yarn remove less-loader
$ yarn add less-loader@5.0.0 -D
$ yarn dev

loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          hack: `true; @import "${resolve(
            './assets/styles/vant_theme_var.less'
          )}";`
        }
      }
    }
```

## 添加 rem 支持

```bash
yarn add postcss-px2rem-exclude lib-flexible -D
```

```
// webpack
build: {
  postcss: [
     require('postcss-plugin-px2rem')({
        rootValue: 37.5,
        minPixelValue: 3,
        exclude: '/node_modules/',
        selectorBlackList: ['.van-dialog'] // 排除以.van-dialog开头的所有class
     }),
     require('autoprefixer')
  ]
}

if (process.client) {
  require('lib-flexible/flexible')
}
```

# autoprefixer

```
yarn add autoprefixer -D

// package.json添加以下配，不配置autoprefixer不执行

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8",
  "ios >= 8",
  "android >= 4.0"
],
```

## 添加 Ts

```bash
yarn add @nuxt/typescript-build ts-loader typescript -D
// 新建 tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "lib": ["dom","es2016"],
    "target": "es5",
    "allowJs": true
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

// webpack
build: {
  extend (config, ctx) {
     config.resolve.extensions.unshift('.ts')
     config.module.rules.push({
        test: /\.(tsx|ts)?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
           appendTsSuffixTo: [/\.vue$/]
       }
     })
  }
}

新建 /types/vue-shims.d.ts

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Route } from 'vue-router'
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}
// 扩充
declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter
    $route: Route
  }
}
```

For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).