# vue3 + typeScript + vite 项目
## 环境依赖
已安装 16.0 或更高版本的 Node.js

### 推荐使用 [pnpm](https://www.pnpm.cn/installation) 命令
1. 执行 `npm install -g pnpm` 全局安装pnpm
2. 执行 `pnpm install` 安装依赖
3. 执行 `pnpm dev` 启动项目
4. 项目启动访问 http://127.0.0.1:5173/ 查看

## 代码格式化
1. 执行 `pnpm lint` 会自动格式化项目中代码，代码风格 “[airbnb-base](https://github.com/airbnb/javascript)”
2. 格式化不了的控制台会有报错信息及不规范文件索引

## 打包
1. `pnpm build-development` 开发环境
2. `pnpm build-test` 测试环境
3. `pnpm build-pre` 预发布环境
4. `pnpm build-production` 生产环境
### 打包后预览
执行 `pnpm preview` 访问 http://127.0.0.1:4173/ 预览

## 代码提交格式
```txt
提交格式 ​ <type>[optional scope]: <description>
说明：
● type ：用于表明我们这次提交的改动类型。
● optional scope：可选，用于标识此次提交主要涉及到代码中哪个模块。
● description：一句话描述此次提交的主要内容，做到言简意赅。
```

## 目录说明
```txt
    |-- .env                                *全局默认，任何环境都加载合并*
    |-- .env.development                    *开发环境下的配置文件*
    |-- .env.pre                            *预发布环境下的配置文件*
    |-- .env.production                     *生产环境下的配置文件*
    |-- .env.test                           *测试环境下的配置文件*
    |-- .eslintrc.cjs                       *eslint配置文件*
    |-- .gitignore                          *git 提交忽略文件*
    |-- .prettierrc.json                    *格式化配置文件*
    |-- components.d.ts                     *自动生成： 自动引入组件（包括项目自身的组件和各种组件库中的组件）类型文件，不需要手动编写import { Button } from 'ant-design-vue'这样的代码了*
    |-- cypress.config.ts                   *单元测试配置文件*
    |-- env.d.ts                            *全局类型文件*
    |-- index.html      
    |-- package.json
    |-- pnpm-lock.yaml                      *pnpm依赖版本文件*
    |-- postcss.config.js                   *postcss配置文件*
    |-- README.md
    |-- tailwind.config.js                  *tailwind配置文件*
    |-- tsconfig.app.json                   *应用的ts配置文件*
    |-- tsconfig.config.json                *ts的配置文件*
    |-- tsconfig.json                       *typeScript配置文件*
    |-- tsconfig.vitest.json                **
    |-- vite.config.ts                      *vite配置文件*
    |-- .vscode
    |   |-- extensions.json
    |-- cypress                             *执行单元测试后的文件夹*
    |-- dist                                *打包后文件夹*
    |-- public                              *公开的静态文件夹*
    |   |-- favicon.ico
    |-- src
        |-- App.vue
        |-- auto-imports.d.ts               *自动生成： 按需自动导入Vue/Vue Router等官方Api的插件, 不需要手动编写import {xxx} from vue*
        |-- main.ts                         *主入口文件*
        |-- api                             *api文件夹-统一在此文件夹下*
        |   |-- index.ts                    *api请求封装文件 get, post...*
        |   |-- user.ts                     *示例：user api请求service*
        |-- assets                          *项目静态资源文件夹*
        |   |-- icons                       *SvgIcon 组件使用的精灵图文件夹 注：只能是svg文件*
        |       |-- logo.svg
        |       |-- tooling.svg
        |-- components                      *项目组件文件夹*
        |   |-- index.ts                    *组件入口文件-所有components中组件均需在此文件中引入*
        |   |-- sys                         *项目本地自定义组件的文件夹*
        |       |-- SvgIcon.vue
        |-- layouts                         *页面布局Layout文件夹*
        |   |-- BlankLayout.vue             *空白layout*
        |   |-- default                     *默认基础layout 包含页头、页尾，可扩展...*
        |       |-- index.vue               *默认基础layout 入口文件*
        |       |-- components              *默认基础layout 子组件文件夹*
        |           |-- DefaultFooter.vue
        |           |-- DefaultHeader.vue
        |-- libs                            *项目工具库文件夹*
        |   |-- emitter.ts                  *mitt库-事件总线对象-使用时均从此文件引入即可*
        |   |-- request                     *axios请求*
        |   |   |-- index.ts                *axios请求主文件*
        |   |   |-- shims.d.ts
        |   |-- utils                       *项目工具文件夹*
        |       |-- baseApiUrl.ts           *根据环境变化获取api地址*
        |       |-- baseStaticUrl.ts        *根据环境变化获取静态资源地址 OSS*
        |       |-- index.ts                *工具主入口文件-自定义工具文件-需在此文件引入导出*
        |       |-- setTitle.ts             *设置网页title*
        |-- pages                           *项目页面文件夹-路由生成默认文件夹*
        |   |-- index.vue                   *主文件*
        |   |-- [...all].vue                *404页面*
        |   |-- home                        **
        |   |   |-- index.vue
        |   |-- user                        *用户相关页面*
        |       |-- index.vue
        |       |-- login
        |       |   |-- index.vue
        |       |-- regist
        |           |-- index.vue
        |-- router                          *项目router目录*
        |   |-- index.ts                    *主配置文件*
        |   |-- permission.ts               *路由拦截文件*
        |-- stores                          *stores文件*
        |   |-- counter.ts
        |   |-- user.ts
        |-- hooks                           *hooks文件夹*
        |-- styles                          *css样式文件夹*
            |-- base.css
            |-- main.css
            |-- tailwind.css                *tailwind 样式文件*

```