@neosjs/create-app/README.md

帮助开发者快速创建Vue3应用并自动配置项目

# @neosjs/create-app

![NPM Version][npm-version-image] ![Npm Week Downloads][npm-downloads-image-week] ![Npm Month Downloads][npm-downloads-image-month] ![Node Version][node-current] ![License][license-image] ![Create App][create-app]

`@neosjs/create-app` 一个帮助开发者快速创建 Vue3 应用并自动配置项目编译的脚手架。配置完整、格式统一, 有点儿意思……

##### 特性：

- ⚡️ [Vue 3](https://cn.vuejs.org/) + [Vue Router](https://router.vuejs.org/) (^4.x) + [Vite 5](https://github.com/vitejs/vite) (^5.x)
- 🍍 [使用 Pinia 的状态管理](https://pinia.vuejs.org) (^2.x) + [数据持久化](https://prazdevs.github.io/pinia-plugin-persistedstate/)(^3.x)
- ⛓ [数据请求](https://docs.neosjs.com/hooks/request.html) (^2.x)
- 📜 支持 `H5模版`、`PC模版`
- 🦾 天然支持 [TypeScript](https://www.typescriptlang.org/) (^5.x) -- **默认**
- 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)
- 🤙🏻 默认开启 [响应性语法糖](https://vuejs.org/guide/extras/reactivity-transform.html)
- ⚓ 自带 `useAsync`、`useLoading`、`useOnline`、`useWindowSizeFn` 等Hooks
- 🔖 自带 `SvgIcon` 组件
- 🎨 [UnoCSS](https://github.com/unocss/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎 (^0.58.x)
- 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入 (^0.17.x)
- 🗂 [组件自动化加载](https://github.com/antfu/unplugin-vue-components) (^0.27.x)
- 📲 [PWA](https://github.com/antfu/vite-plugin-pwa) (^0.20.x)
- ✅ [移动端 VConsole 功能](https://github.com/vadxq/vite-plugin-vconsole)(^1.3.1)，并自动转换`px`为`rem` --- **H5默认添加**
- 🔐 [https 开发服务提供证书支持](https://github.com/liuweiGL/vite-plugin-mkcert)(^1.11.0)
- 🏝 [SVG Icons支持](https://github.com/vbenjs/vite-plugin-svg-icons) (^2.0.1)
- ⚙️ [Vitest](https://github.com/vitest-dev/vitest) 进行单元测试 (^0.26.3)
- 📖 Markdown 支持
- 🌏 国际化支持(默认支持中文简体、英文)
- 🖇 [代码提交规范](https://commitlint.js.org/) (^19.x)
- 🧱 代码格式检查，简化[Eslint(^9.x)](https://eslint.org/)配置，自动修复代码格式 -- **默认**
- 💻 [统一 VsCode 配置](https://code.visualstudio.com/)
- 🎉 GitHook 自动化检查提交信息、检查代码
- 📦 自动安装依赖
- 💥 UI库支持：[Element Plus](https://element-plus.gitee.io/#/zh-CN)、[Ant Design Vue](https://2x.antdv.com/docs/vue/introduce-cn/)、[Vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)、[Tdesign](https://tdesign.tencent.com/)、[Arco](https://arco.design/) 等

## 使用方法

要使用 `@neosjs/create-app` 创建一个新的Vue项目，只需在终端运行以下命令:

```sh
# npm
npm create @neosjs/app@latest

# yarn
yarn create @neosjs/app@latest

# pnpm
pnpm create @neosjs/app@latest # 推荐使用 pnpm
```

然后按照提示去做!

> 为了体验最新的功能，请切记加上 **`@latest`** 后缀

您还可以通过其他命令行选项直接指定项目名称和要使用的配置。例如，要构建一个Vue Router + Pinia项目，运行:

```sh
# npm
npm create @neosjs/app@latest my-app --pinia --router

# yarn
yarn create @neosjs/app@latest my-app --pinia --router

# pnpm
pnpm create @neosjs/app@latest my-app --pinia --router

```

> **推荐使用交互式命令行，以便更好的选择项目配置**

### 支持选项

- `router` - 引入Vue Router进行单页面应用开发
- `pinia` - 引入Pinia用于状态管理
- `request` - 引入数据请求
- `unocss` - 引入Unocss原子化样式库
- `eslint` - 引入Eslint代码检查
- `pwa` - 引入PWA渐进式Web应用
- `https` - 添加https证书
- `svg-sprite` - 引入SvgSprite图标组件
- `vueuse` - 引入Vueuse工具库
- `vitest` - 添加Vitest进行单元测试
- `git` - 初始化Git
- `githooks`(**当开启`git`时，该参数有效**) - 引入用于Git钩子用于自动化 检查提交信息、检查代码
- `h5` - 创建一个H5项目
- `markdown` - 添加Markdown支持
- `devtools` - 添加Devtools支持
- `install` - 自动安装依赖
- `force` - 强制覆盖已存在的目录

[npm-version-image]: https://img.shields.io/npm/v/@neosjs/create-app?style=flat&colorA=2d333b&colorB=1fa669
[npm-downloads-image-week]: https://img.shields.io/npm/dw/@neosjs/create-app?style=flatt&colorA=2d333b&colorB=1fa669
[npm-downloads-image-month]: https://img.shields.io/npm/dm/@neosjs/create-app?style=flat&colorA=2d333b&colorB=1fa669
[license-image]: https://img.shields.io/npm/l/@neosjs/create-app?style=flat&colorA=2d333b&colorB=1fa669
[node-current]: https://img.shields.io/node/v/@neosjs/create-app?style=flat&colorA=2d333b&colorB=1fa669
[create-app]: https://img.shields.io/badge/NeosJS-create--app-1fa669?style=flat&colorA=2d333b&colorB=1fa669