pnpm+vite+ts+vue3创建项目

项目基于以下相关技术搭建：

• vue3：https://cn.vuejs.org/api/
• typescript：https://typescript.bootcss.com/tutorials/typescript-in-5-minutes.html
• vite：https://cn.vitejs.dev/
• pnpm：https://www.pnpm.cn/
• eslint：http://eslint.cn/
• prettier：https://www.prettier.cn/
• husky：https://typicode.github.io/husky/
• vue-router：https://router.vuejs.org/zh/
• pinia：https://pinia.web3doc.top/
• axios：https://www.axios-http.cn/
• windicss：https://cn.windicss.org/

第一步：确保安装好了node.js与pnpm(官网有安装方式)

注意: Vite 需要 Nodejs 版本 14.18+，16+，然而，有些模要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升银伤的 Node 版本。
提示: 可以使用nvm来管理node
https://github.com/coreybutler/nvm-windows/releases

第二步：使用pnpm创建vite项目

注意: 输入命令后根据提示选择，项目是ts所以必选typescript
创建项目：pnpm create vite
也可以通过附加的命令行选项直接指定项目名称和模板 pnpm create vite my-vue-app --template vue

第三步：使用vscode打开项目

项目初始化：pnpm install
注意：安装完项目还报错，vscode打开终端ctrl+shift+p输入reload window

第四步：配置eslint

安装eslint：pnpm add eslint -D
eslint初始化：pnpm eslint --init
安装完成之后
依赖安装完成之后，生成.eslintrc.cjs配置文件，进入后会出现找不到的模块报错，需要在env字段中增加 node:true
配置以解决eslint找不到module的报错，并且添加vue文件解析器。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node":true //新增
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-essential"
    ],
    "parser": "vue-eslint-parser", //新增
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    "rules": {
    }
}

在package.json中的scripts中添加lint命令，测试eslint

"eslint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"

执行测试命令：pnpm eslint
安装vscode插件，统一代码风格。Prettier ESlint
在项目中的.vscode目录下新建settings.json文件中加入自动执行脚本

{
    // 开启eslint 自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint":true
    }
}

第五步：配置prettier

执行：pnpm add prettier -D
根目录下创建.prettierrc.cjs文件

// prettier的默认配置文件
module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 2 个空格缩进
    tabWidth: 2,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 不尾随分号
    semi: false,
    // 使用单引号
    singleQuote: true,
    // 多行逗号分割的语法中，最后一行不加逗号
    trailingComma: "none",
    // 单个参数的箭头函数不加括号 x => x
    arrowParens: "avoid",
    // 对象大括号内两边是否加空格 { a:0 }
    bracketSpacing: true,
  };

在package.json中的scripts添加以下命令：

"prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""

在项目.vscode项目的settings.json文件下添加自动执行脚本

// 保存的时候自动格式化
    "editor.formatOnSave": true,
    // 默认格式化工具选择prettier-eslint
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"

第六步：配置husky

配置husky保证提交到git的代码经过eslint和prettier处理过的。
husky是一个用来管理git hook的工具，git hook即在我们使用git提交代码的过程中会触发钩子。
安装：pnpm add husky -D
在package.json中的scripts添加一条脚本命令，该命令会在pnpm install之后运行，这样其他克隆该项目就会在安装包的时候自动
安装husky.

"prepare": "husky install"

执行pnpm prepare命令生成husky目录。（注意：如果提示没有git文件是属于git未初始化，执行git init）
使用husky命令添加pre-commit钩子，运行。
执行命令：pnpm husky add .husky/pre-commit “pnpm eslint && pnpm prettier”
会在husky目录下生成一个pre-commit 文件。

第七步：配置vite别名

在vite.config.ts中增加别名配置，以~举例

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
        '~': resolve(__dirname,'./src'),
    }
  },
  plugins: [vue()],
})

配置tsconfig.json别名让代码可以识别路径。

    /* 别名 */
    "baseUrl": "./",
    "paths": {
      "~/*": ["./src/*"]
    }