1.0.0 • Published 4 years ago
nuxt-wx-cli v1.0.0
kw-payment
支付的重构项目,所有支付相关的重构都放这里
后台给出的接口 code 规范
后台支付签名中的坑
- 支付接口: /sppay/prescription, 返回签名参数 timeStamp 中的 s 是大写
- 微信 chooseWXPay 接口要求的是小写 timestamp
消除回车换行格式问题
git config --global core.autocrlf false
css 规范
common 组件规范
components 组件规范
plugins 规范
transformers 规范
utils 规范
git commit 规范
/**
* 自定义规范
* 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
# 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
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
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 支持
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
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.
1.0.0
4 years ago