Vue3 + TypeScript + Vite 初始项目搭建（ESLint、Prettier、Sass(1)

Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others

然后选择项目使用的语言：

? Select a variant: » - Use arrow-keys. Return to submit.

TypeScript
JavaScript
Customize with create-vue ↗
Nuxt ↗

![image.png](https://img-blog.csdnimg.cn/img_convert/4ac70d01e456a43dd73f6d75796a1b83.png)  
然后我们进入项目目录，执行如下命令为创建的项目安装依赖：

pnpm i

![image.png](https://img-blog.csdnimg.cn/img_convert/1e828b10a3c3f28e223d21bc26cd7c96.png)  
 


### 修改默认生成的 TypeScript 配置文件


这是我根据自身需求在默认生成的 TypeScript 配置文件修改后的内容：



> 
> 由于后续会为项目中的 src 目录配置别名 `@`，为了使 TyprScript 编译器能够识别不报错，所以在 tsconfig.json 文件中使用 paths 配置项添加 src 目录的别名配置。
> 
> 
> 


tsconfig.json



> 
> 配置文件中使用到的配置项的解释说明可以参考：<https://www.yuque.com/u27599042/wypqhp/gbtboaotepoqt6et>
> 
> 
> 

// tsconfig.json 配置文件中配置项详解可以参考：
// https://www.yuque.com/u27599042/wypqhp/gbtboaotepoqt6et
{
// TS 编译器选项
“compilerOptions”: {
// 默认所有可见的 @types 包会在编译过程中被包含进来。
// 包含什么目录下的类型声明文件
// “typeRoots”: [],
// 包含 node_modules/@types 或者 typeRoots 配置项
// 指定的目录里面的哪些库的类型声明文件包
// “types”: [],
// TS 代码编译成的 JS 代码的目标版本
“target”: “ES2015”,
// TS 代码编译成的 JS 代码的使用的模块化标准
“module”: “ESNext”,
// 允许在项目中使用 js 文件
//“allowJs”: true,
// 是否生成 TS 代码转换成 JS 代码时的源码映射文件
“sourceMap”: true,
// 是否将 class 声明中的字段语义从 [[Set]] 变更到 [[Define]]
“useDefineForClassFields”: true,
// 编译过程中需要引入的库
// 可选值参考：https://www.tslang.cn/docs/handbook/compiler-options.html
“lib”: [“ES2015”, “ESNext”, “DOM”, “DOM.Iterable”],
// 是否忽略对所有的声明文件（ *.d.ts）的类型检查
“skipLibCheck”: true,

/\* Bundler mode 打包模式配置 \*/
// 模块解析策略
"moduleResolution": "Node",
// 是否允许导入 TypeScript 文件时省略文件的后缀
"allowImportingTsExtensions": true,
// 是否允许 JSON 文件作为模块导入
"resolveJsonModule": true,
// 是否将每个文件作为单独的模块
"isolatedModules": true,
// 是否不生成 TS 代码编译成 JS 代码的输出文件
"noEmit": true,
// 编译后生成的代码中会保留 JSX 代码，后续代码的使用需要代码转换工具进行转换操作，
// 如 Babel，输出文件会带有 .jsx 扩展名
"jsx": "preserve",

/\* Linting \*/
// 是否开启所有严格模式选项
"strict": true,
// 是否强制代码中使用的模块文件名必须和文件系统中的文件名保持大小写一致
"forceConsistentCasingInFileNames": true,
// 是否允许从没有设置默认导出的模块中默认导入
"allowSyntheticDefaultImports": false,
// 对于没有使用的局部变量是否报错
"noUnusedLocals": true,
// 对于没有使用的参数是否报错
"noUnusedParameters": true,
// 对于 switch 语句中的 case 穿透是否报错
"noFallthroughCasesInSwitch": true,
// 对于在表达式和声明上有隐含的 any 类型时是否报错
"noImplicitAny": true,
// 解析非相对模块名的基准目录，从当前 tsconfig.json 文件所在的目录开始查找
// 由于 tsconfig.json 文件在项目根目录中，所以从项目根目录开始查找
"baseUrl": ".",
// 配置模块名基于 baseUrl 配置的基准目录的路径映射
"paths": {
  // 配置项目根目录下 src 目录的别名为 @
  "@/\*": [
    "src/\*"
  ]
}

},
// 配置需要被编译的文件或文件夹
“include”: [“src/**/*.ts”, “src/**/*.tsx”, “src/**/*.vue”],
// 配置哪些文件不需要 TypeScript 编译器进行处理
“exclude”: [“node_modules”],
// 将其他项目引入到当前配置文件所在的项目中
“references”: [{ “path”: “./tsconfig.node.json” }]
}

### 统一项目中使用的安装依赖的包管理工具为 pnpm


在项目的根目录中创建 scripts/preinstall.js 文件，在该文件中添加下面的内容

// 如果安装依赖使用的包管理工具不是 pnpm，则在终端控制台中打印警告，然后退出本次执行的命令
if (!/pnpm/.test(process.env.npm_execpath || ‘’)) {
console.warn(
\u001b[33mThis repository must using pnpm as the package manager +
for scripts to work properly.\u001b[39m\n,
)
process.exit(1)
}

然后，在 package.json 文件中添加 preinstall 脚本：



> 
> 当我们使用包管理工具安装依赖时，会触发 preinstall 脚本的执行（npm 提供的生命周期钩子），然后就会执行我们指定的 scripts/preinstall.js 文件，检查当前安装依赖使用的包管理工具是不是 pnpm。
> 
> 
> 

“scripts”: {
“preinstall”: “node ./scripts/preinstall.js”,
“dev”: “vite”,
“build”: “vue-tsc && vite build”,
“preview”: “vite preview”
},

![image.png](https://img-blog.csdnimg.cn/img_convert/ee06adc444ae3de0aec03a1db26c7dfb.png)