# <%= projectName %>

## 技术栈

- 框架：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [Vue 3.x](https://v3.cn.vuejs.org/) <% if(userAnswer.needsRouter){ %>+ [Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)<% } %> <% if(userAnswer.needsPinia){ %>+ [Pinia 2.x](https://pinia.vuejs.org/)<% } %>
- 构建工具：[Vite 3.x](https://cn.vitejs.dev/)
- 包管理器：[pnpm](https://www.pnpm.cn/)(*推荐*)
- CSS 编译：[Less](http://lesscss.cn/) + [PostCSS](https://www.postcss.com.cn/)
<% if(userAnswer.needsRequest){ %>- HTTP 工具：[@neosjs/request](https://docs.neosjs.com/request)<% } %>
- 代码规范：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [lsLint](https://ls-lint.org/)+ [Airbnb js style guide](https://github.com/airbnb/javascript#translation)
- Git Hook 工具：[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)
- 提交规范：[Commitlint](https://commitlint.js.org/#/)

## 编程风格、插件工具

<% if(userAnswer.needsAutoImport){ %>- [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - 自动加载组件 (已自动集成到项目)
- [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) - 直接使用 CompositionAPI，无需导入 (已自动集成到项目)<% } %>
- [VueUse](https://vueuse.org/) - CompositionAPI 版本的 lodash
<% if(userAnswer.needsPinia){ %>- [pinia-plugin-persistedstate](https://github.com/l-x-f/pinia-persistedstate-plugin#readme) - 数据持久化<% } %>
- [SFC 语法](https://cn.vuejs.org/api/sfc-script-setup.html) `<script lang="ts" setup name="XXXXX"></script>`

## IDE设置

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (禁用 Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## 项目步骤

### 安装项目依赖

```sh
<%= packageManager %> install
```

### 启动开发服务

```sh
<%= packageManager %> dev
```

### 编译项目

```sh
# 生产环境
<%= packageManager %> build:prod
# 测试环境
<%= packageManager %> build:test
```
<% if(userAnswer.needsVitest) {%>
### 单元测试 [Vitest](https://vitest.dev/)

```sh
<%= packageManager %> test:unit
```
<% } %>

### 代码检测 [ESLint](https://eslint.org/)

```sh
<%= packageManager %> lint:eslint
```

## 组件使用
<% if(userAnswer.needsRequest){ %>
### request

> 建议使用业务层的 `useRequest` hooks.

```ts
import {request } from '@neosjs/request'

const res = await useRequest('/api/posts', {
  params: {
    page: 1,
    limit: 18,
    // xxxxxxxx
  },
  retry: 2, // 重试次数
  retryDelay: 2000, //重试间隔(ms)
  cache: false // 禁用缓存
  cacheMaxAge: 60000， // 缓存时长(ms)
  forceUpdate: false // 是否强制更新缓存
})
```

### requestAll

```ts
import { requestAll, request } from '@neosjs/request';

const requestA = await request('xxxxxxx');
const requestB = await request('yyyyyyy');
const res = await requestAll[(requestA, requestB)];
```
<% } %>
### SvgIcon(svg 图标)

> 1. 组件已自动引入，无需手动载入。
>
> 2. 将需要的 svg 图标放到`src/assets/svgs`内。如：`src/assets/svgs/home.svg`

```html
<SvgIcon name="home" />
```

#### Props

| 属性   | 类型             | 默认值 | 说明          |
| ------ | ---------------- | ------ | ------------- |
| prefix | String           | icon   | 样式名称前缀  |
| name   | String           | -      | svg 的 name   |
| size   | String \| Number | 16     | icon 尺寸大小 |
| spin   | Boolean          | false  | 是否旋转      |