526互联

Vite + Vue3 +TS 项目搭建

发布时间 2023-04-21 18:55:08作者: Better-HTQ

安装 nvm

略

安装 node

略

使用 Vite创建项目

vite3.x
文档：https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

然后直接进入项目初始化的选择，自定义一些选项可以选择
Customize with create-vue
image

或者直接附加命令行选项，省去选择操作，直接生成默认最小项目：

pnpm create vite my-app --template vue-ts

运行项目

pnpm install
pnpm format // perttier 格式化
pnpm dev

初始化 Git 仓库

项目目录下运行

git init

集成 EditorConfig 配置

EditorConfig有助于为在不同编辑器和IDE中处理同一项目的多个开发人员维护一致的编码风格。
官网：editorconfig.org

插件安装

  • VS Code 安装 EditorConfig for VS Code 插件
  • JetBrains 系列（WebStorm、IntelliJ IDEA 等）则不用额外安装插件，可直接使用 EditorConfig 配置。

配置文件

在根目录下创建 .editorconfig 文件↓

# Editor configuration, see http://editorconfig.org

# 表示是最顶层的 EditorConfig 配置文件
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

集成 Prettier 配置

代码格式化程序
官网：prettier.io

  1. 下载 Prettier - Code formatter VS Code 插件

  2. 在根目录下创建 .prettierrc.json 文件↓

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}
  1. 使用命令格式化代码
# 格式化所有文件（. 表示所有文件）
npx prettier --write .

集成 ESLint 配置

CLI自带，无特殊要求不需要配置。
手动集成参考：https://juejin.cn/post/6951649464637636622#heading-13

解决 ESlint 和 Prettier 冲突

  1. 安装插件
npm i eslint-plugin-prettier eslint-config-prettier -D
  1. 在 .eslintrc.js 添加 prettier 插件
module.exports = {
  ...
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  ...
}

配置 husky

操作 git 钩子的工具
官网：husky

配置 lint-staged

本地暂存代码检查工具

  1. 安装
npm i lint-staged -D

配置 commitlint

commit 信息校验工具

配置 commitizen

辅助 commit 信息 ,就像这样,通过选择输入,规范提交信息

修改 vite 配置文件