Vue3 + Vite + Pinia + Ts

[TOC]

1. 项目运行

1.1 安装

npm install
//or
yarn

1.2 启动

npm run dev
//or
yarn dev

1.3 打包

npm run build
//or
yarn build

1.4 eslint校验

npm run lint
//or
yarn lint

1.5 prettier格式化

npm run prettier
//or
yarn prettier

1.6 openApi(待办)

  1.umi集成的openApi
  2.官方openApi工具

2. 目录

(待办)

3. 项目规范

3.1 eslint语法校验

.eslintrc.cjs *vite新版本采用.cjs扩展名 .eslintignore

eslint
eslint-config-prettier --解决eslint和prettier规则冲突问题
eslint-plugin-prettier --eslint用prettier格式化代码的能力
eslint-plugin-vue      --vue3官方eslint检测

3.2 prettier格式化

.prettierrc.json .prettierignore

prettier --write 

3.3 lint-staged + husky

git commit时校验，格式化暂存区的代码

pre-commit husky
lint-staged

* 新版本husky需要.husky目录配置文件
  旧版本package.json配置如下无效
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

4. 环境变量

.env 全局通用环境 .env.dev 本地开发环境 .env.test 本地测试环境 .env.release 本地预发布环境 .env.prod 本地生产环境

* NODE_ENV 是nodeJs的系统环境变量  process.env.NODE_ENV
    三种模式
    development -- 开发环境
    test -- 单元测试（区别于.env.test）
    production -- 生产环境

* VITE_XXX 是vite自定义环境变量   import.meta.env.VITE_XXX
    区别vue2 - VUE_APP_XXX   process.env.VUE_APP_XXX

* cross-env库
    解决不同操作系统(windows/MAC)对环境变量不兼容的问题
    底层采用dotenv库实现