三分钟带你了解 vue3 + ts 项目搭建前期工作

在初始化项目之前,先给大家推荐一个包管理工具,相比较 npm/yarn 主要优势如下:

• 包安装速度极快。
• 磁盘空间利用效率高。

下载命令

npm i pnpm -g

如何使用？

NPM 命令	PNPM 命令
npm install	pnpm install
npm i axios	pnpm add axios
npm i webpack -D	pnpm add webpack -D
npm run dev	pnpm dev

这只是一个小插曲, 也可以使用 npm/yarn 不影响的

项目搭建

1. 执行创建命令

pnpm create vue
# or
npm init vue@latest
# or
yarn create vue

1. 选择项目依赖内容

✔ Project name: … patients-h5-100
✔ Add TypeScript? … No / `Yes`
✔ Add JSX Support? … `No` / Yes
✔ Add Vue Router for Single Page Application development? … No / `Yes`
✔ Add Pinia for state management? … No / `Yes`
✔ Add Vitest for Unit Testing? … `No` / Yes
✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes
✔ Add ESLint for code quality? … No / `Yes`
✔ Add Prettier for code formatting? … No / `Yes`

Scaffolding project in /Users/zhousg/Desktop/patient-h5-100...

Done. Now run:

  cd patient-h5-100
  pnpm install
  pnpm lint
  pnpm dev

VSCode 插件安装

要是想要编写 vue3 + ts 的项目就需要使用到插件

必装

Vue Language Features (Volar) Vue3 语法支持，默认的格式化工具设置为这个。

TypeScript Vue Plugin (Volar) Vue3 中更好的 TS 提示。

ESLint 代码风格校验, 也可以规范代码风格。

❗ VSCode 如果安装了 Prettier 插件的可以先禁用，或者关闭保存自动格式化功能，避免和项目的 ESLint 风格冲突。

ESLint 基本的配置

内容

修改.eslintrc.cjs文件，补充配置项

{
    rules: {
        'prettier/prettier': [
            'warn',
            {
                singleQuote: true,
                semi: false,
                printWidth: 80,
                trailingComma: 'none',
                endOfLine: 'auto'
            }
        ],
        'vue/multi-word-component-names': [
            'warn',
            {
                ignores: ['index']
            }
        ],
        'vue/no-setup-props-destructure': ['off']
    }
}

• 格式：单引号，没有分号，行宽度 80 字符，省略最后一个逗号，换行字符串自动（系统不一样换行符号不一样）。
• Vue 组件需要大驼峰命名，除去 index 之外，App 是默认支持的。
• 允许对 props 进行解构，因为我们会开启解构保持响应式的语法糖。

你可以之间运行这个命令来格式化你的代码

# 修复格式
pnpm lint

VSCode 开启 ESLint 自动修复， .vscode/settings.json 。

{
    // 省略其他
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    }
}

关闭掉 VSCode 保存格式化的功能。

代码检查工作流

有一个用来在保存提交的时候自动按照 ESLint 的代码规范来给你代码进行格式化的包, 是为了防止在开发项目的时候有人会破坏代码规范进行提交

husky(哈士奇)

作用: husky 可以防止使用 Git hooks 的一些不好的 commit 或者 push

注意: 在使用以下命令的时候要先创建仓库,否则会报错,下载不了

执行下面命令:

pnpm dlx husky-init && pnpm install

测试效果

1. 故意调整代码格式导致不符合eslint规则，例如多添加一些空行
   在使用以下命令的时候要先创建仓库,否则会报错,下载不了

执行下面命令:

pnpm dlx husky-init && pnpm install

配置
在你下载完毕之后会生成一个文件夹

在 pre-commit 文件夹中配置即可

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm lint

测试效果

1. 故意调整代码格式导致不符合eslint规则，例如多添加一些空行
2. git add . git commit -m “xxx” 。会发现，提交时，会自动运行pnpm lint。