Vue 3 + TypeScript + Vite 初始项目模板

本项目基于 Vue 3 + TypeScript + Vite 创建的初始项目模板，其中包含了一些常用的配置和工具，方便开发。

目前已完成配置的内容

• TypeScript
• ESLint
• vite-plugin-eslint
  • 实现 Vite 运行或构建项目时，能够自动执行 ESLint 代码检查和修复
• Prettier
• Sass
• Stylelint
• husky
• src 目录别名
• pnpm
  • 已通过配置实现统一项目中使用的安装依赖的包管理工具为 pnpm
• 项目全局环境变量
• Vue 相关的 API、自定义函数以及自定义组件自动按需引入
• Vue Router 路由文件自动生成
• 错误页面 src/pages/Error.vue
• Tailwind CSS 及其暗色模式

目前已实现的组件

本项目的搭建文档

• Vue3 + TypeScript + Vite 项目搭建（ESLint、Prettier、Sass、Stylelint、husky、pnpm、src 目录别名配置）
• Vite 项目中环境变量的配置和使用
• Vue3 + Vite 项目中配置 Vue 相关的 API、自定义函数以及自定义组件自动按需引入
• Vue3 + Vite 项目中配置路由文件自动生成实现路由自动配置
• Vite 创建的项目中配置 Tailwind CSS 及其暗色模式

本项目搭建过程中的报错及其解决方法

• Vite 项目中配置 vite-plugin-eslint 插件报错 Could not find a declaration file for module vite-plugin-eslint. implicitly has an any type.

项目依赖安装

pnpm i

项目 package.json 中脚本说明

"preinstall": "node ./scripts/preinstall.js"

使用包管理工具安装依赖时，该脚本会自动执行，会检查当前使用的安装依赖的包管理工具是否为 pnpm，如果不是，则会停止安装依赖并提示用户使用 pnpm 安装依赖。

"lint": "eslint ./src"

执行该脚本，会执行 ESLint 对 src 目录下文件中的代码进行检查

"fix": "eslint ./src --fix"

执行该脚本，会执行 ESLint 对 src 目录下文件中的代码进行检查和修复

"format": "prettier --write \"./src/**/*.{html,vue,ts,js,json,md}\" --config ./.prettierrc.json"

执行该脚本，会执行 Prettier 对 src 目录下 html,vue,ts,js,json,md 文件中的代码进行格式化

"lint:eslint": "eslint ./src/**/*.{js,jsx,ts,tsx,vue} --cache --fix"

执行该脚本，会执行 ESLint 对 src 目录下 js,jsx,ts,tsx,vue 文件中的代码进行检查和修复

"lint:style": "stylelint ./src/**/*.{css,scss,vue} --cache --fix"

执行该脚本，会执行 Stylelint 对 src 目录下 css,scss,vue 文件中的代码进行检查和修复

"dev": "vite --open --mode=dev"

执行该脚本，会启动一个本地服务器，并自动打开浏览器访问该服务器，此时的环境模式为 dev 开发模式

"test": "vite --open --mode=test"

执行该脚本，会启动一个本地服务器，并自动打开浏览器访问该服务器，此时的环境模式为 test 测试模式

"build": "vue-tsc && vite build --mode=prod"

对项目进行构建打包，构建打包结果在项目根目录的 dist 目录中，此时的环境模式为 prod 生产模式

"preview": "vite preview --open"

对项目构建结果进行预览，执行该脚本，会启动一个本地服务器，并自动打开浏览器访问该服务器，启动运行访问 dist 目录，此时的环境模式为 prod 生产模式