idenet / vue-music

vue-music

Vue 3 + TypeScript + Vite

项目初始化和配置

1. 引入eslint

使用pnpm create @eslint/config进行eslint配置。配置可执行命令"lint": "eslint \"src/**/*.{vue,ts,tsx,js,jsx}\" --fix"

2. 引入husky 和 lint-staged在提交过程中进行校验和fix

安装pnpm add husky lint-staged -D。 配置prepare": "husky install"并执行npm run prepare 执行npx husky add .husky/pre-commit "npx lint-staged"生成钩子函数文件 配置lint-staged

"lint-staged": {
  "src/**/*.{vue,ts}": [
   "prettier --write .",
   "eslint  --fix --cache"
 ],
 "*.md": [
   "prettier --write"
 ]
},

配置prettier，安装eslint-plugin-prettier 和 eslint-config-prettier，然后在eslintrc中配置

extends: [
 'prettier',
],

3. 配置commitlint

安装pnpm add @commitlint/cli @commitlint/config-conventional -D

创建.commitlintrc.cjs文件，添加默认规范@commitlint/config-conventional

可能记不住命令，添加信息的命令行展示pnpm add -D commitizen @commitlint/cz-commitlint，然后配置 "commit": "git add . && git-cz",，并且配置config。每次要提交就运行npm run commit

"config": {
 "commitizen": {
   "path": "@commitlint/cz-commitlint"
 }
},

上面我们应用的是commitlint插件的cz

git-cz

其实有更好的方式使用自定义配置的git-cz, 安装commitizen git-cz。然后将上面的配置path 引入到git-cz的地址"./node_modules/git-cz"，创建changelog.config.cjs，配置自定义的git提交提示

项目初始化

1. 解决点击穿透，这是因为 web 页面在点击的时候会判断是否是放大，所以有一个 300ms 的延迟，通过 viewpoint 解决
2. 多个指令的覆盖问题