这是我参与「第五届青训营 」伴学笔记创作活动的第 九 天

本文的搭建的组件库含有vue3.2最新语法糖+TS+Vite+Eslint+prettier+husky+vitest+@vue/test-utils

一、项目环境

Node16++++(版本高一些总是比较好的，避免出现一些依赖和环境不匹配的烦恼)

vue-cli（vue搭建项目必备的脚手架，你值得拥有）

二、搭建项目

在自己心仪的文件夹打开cmd输入以下命令。vue脚手架可以直接帮你把很多基础的配置全部搞定，推荐推荐

npm init vue@latest

第一步，在vue-project输入你的项目名

接着选Yes（下面没特别说明的就选yes）

? Add TypeScript? » No / Yes

选No，我们不需要路由

? Add Vue Router for Single Page Application development? » No / Yes

选No，我们不需要状态保存

? Add Pinia for state management? » No / Yes

选No，我们不需要E2E测试（其实也可以选，但一个基础的组件库不太需要）

? Add an End-to-End Testing Solution? » - Use arrow-keys. Return to submit.
>   No
    Cypress
    Playwright

三、配置项目

进入我们项目文件夹，先pnpm install（择你所爱，pnpm真心推荐）

接着开始补充我们的依赖

安装husky和lint-staged（安装了后者可以加快提交速率，lint-staged 的作用是只对 git add 缓存区的代码进行 eslint 代码规范校验。这样就避免了全局校验的问题。） npm install husky lint-staged -d

下面正式进入配置环节，第一个配置husky

输入命令npx husky install

在.husky根目录下创建一个pre-commit文件并写入以下内容

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

npx lint-staged

在package.json下面写入脚本

{
  //...
  "scripts": {
    "prepare": "husky install",//写入这一行
    //.....
  },
//....
  "lint-staged": {  //还有下面这几行
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --ext .ts packages/*/**.ts", 
      "eslint --ext .ts packages/*/**.ts --fix" 
    ]
  }
}

至此husky配置完毕

Eslint的配置可以在rule下面添加对应你需要的规则

规则文档在(eslint.cn/docs/rules/)

最后提一嘴，在ts文件里面看到ts找不到.vue文件的时候，在env.d.ts写入以下内容

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}