<p align="center">
<image height="400" src="https://user-images.githubusercontent.com/46418596/126895174-ee762828-f3aa-4786-9a73-f143b9082afa.png">
</p>

## 介绍

一个综合性 Vue3.x 综合模板，工程配套文档：[https://juejin.cn/post/6988704825450397709](https://juejin.cn/post/6988704825450397709)

- 编程语言：[TypeScript](https://www.typescriptlang.org/zh/)
- 构建工具：[Vite 2.x](https://cn.vitejs./dev/)
- 前端框架：[Vue 3.x](https://v3.cn.vuejs.org/)
- 路由工具：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
- 状态管理：[Pinia](https://pinia.esm.dev/)
- CSS 预编译：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
- HTTP 工具：[Axios](https://axios-http.com/)
- Git Hook 工具：[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)
- 代码规范：[EditorConfig](http://editorconfig.org/) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/)
- 单元测试：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)

> 在线预览该工程：[vite-vue3-sfc-template](https://251205668.github.io/vite-vue3-sfc-template/#/)
>
> 为此我还准备了这些常用模板
>
> - Vue2.x + vite 模板
>   - TSX + decorator 能力：[vite-vue2-tsx-start](https://github.com/251205668/vite-vue2-start/tree/tsx-decorator)
>   - SFC + decorator 能力：[vite-vue2-start](https://github.com/251205668/vite-vue2-start)
> - Vue3.x + vite 模板
>   - TSX + composition-api 能力：[vite-vue3-start](https://github.com/251205668/vite-vue3-start)
>   - SFC + composition-api 能力：[vite-vue3-sfc-template](https://github.com/251205668/vite-vue3-sfc-template)

## 上手

```shell
# clone
git clone https://github.com/251205668/vite-vue3-sfc-template

# install
yarn install

cd vite-vue3-sfc-template

# start
yarn dev

# union test
yarn build

# build
yarn build
```

## TODO

- [ ] 脚手架 CI/CD 自动化
- [ ] Vite 迁移实战落地