# vue-ts-vite-template

**Repository Path**: miao-yuhan-void/vue-ts-vite-template

## Basic Information

- **Project Name**: vue-ts-vite-template
- **Description**: Vue 3 + TypeScript + Vite 初始项目模板，目前已完成配置的内容：TypeScript、ESLint、vite-plugin-eslint、Prettier、Sass、Stylelint、husky、src 目录别名、pnpm、项目全局环境变量
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-04-11
- **Last Updated**: 2025-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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 目录别名配置）](https://www.yuque.com/u27599042/vue/ealud0gzbqrxaggk)
- [Vite 项目中环境变量的配置和使用](https://www.yuque.com/u27599042/vue/hi5315in3aa04srk)
- [Vue3 + Vite 项目中配置 Vue 相关的 API、自定义函数以及自定义组件自动按需引入](https://www.yuque.com/u27599042/vue/wlgm6ysrckd6oegc)
- [Vue3 + Vite 项目中配置路由文件自动生成实现路由自动配置](https://www.yuque.com/u27599042/vue/mx9rb4p3uwxkgine)
- [Vite 创建的项目中配置 Tailwind CSS 及其暗色模式](https://www.yuque.com/u27599042/vue/vhdsm0lmk4w2ut0d)

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

- [Vite 项目中配置 vite-plugin-eslint 插件报错 Could not find a declaration file for module vite-plugin-eslint. implicitly has an any type.](https://www.yuque.com/u27599042/vue/cgnesb8kh65dpu4s)

## 项目依赖安装

```bash
pnpm i
```

## 项目 package.json 中脚本说明

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

```bash
"lint": "eslint ./src"
```
执行该脚本，会执行 ESLint 对 src 目录下文件中的代码进行检查

```bash
"fix": "eslint ./src --fix"
```
执行该脚本，会执行 ESLint 对 src 目录下文件中的代码进行检查和修复

```bash
"format": "prettier --write \"./src/**/*.{html,vue,ts,js,json,md}\" --config ./.prettierrc.json"
```
执行该脚本，会执行 Prettier 对 src 目录下 html,vue,ts,js,json,md 文件中的代码进行格式化

```bash
"lint:eslint": "eslint ./src/**/*.{js,jsx,ts,tsx,vue} --cache --fix"
```
执行该脚本，会执行 ESLint 对 src 目录下 js,jsx,ts,tsx,vue 文件中的代码进行检查和修复

```bash
"lint:style": "stylelint ./src/**/*.{css,scss,vue} --cache --fix"
```
执行该脚本，会执行 Stylelint 对 src 目录下 css,scss,vue 文件中的代码进行检查和修复

```bash
"dev": "vite --open --mode=dev"
```
执行该脚本，会启动一个本地服务器，并自动打开浏览器访问该服务器，此时的环境模式为 dev 开发模式

```bash
"test": "vite --open --mode=test"
```
执行该脚本，会启动一个本地服务器，并自动打开浏览器访问该服务器，此时的环境模式为 test 测试模式

```bash
"build": "vue-tsc && vite build --mode=prod"
```
对项目进行构建打包，构建打包结果在项目根目录的 dist 目录中，此时的环境模式为 prod 生产模式

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