Vue Starter Init

Vue Starter Init

使用 liasica/vue-starter 一键初始化带有完整 lint/style 预设的 Vue 3 项目。

Overview

vue-starter 封装了 pnpm create vue@latest + 一组默认 dev 依赖 + ESLint/Stylelint/Vite/CSS 方案配置文件的写入，最终产出可直接开发的 Vue 3 + Vite + TypeScript 工程。

核心产物：

• 由 create-vue 交互式生成的项目骨架
• 已安装并配置好的 ESLint（含 @stylistic、eslint-plugin-vue、oxlint、可选 @unocss/eslint-config）
• 已安装并配置好的 Stylelint（SCSS + Vue + @stylistic/stylelint-plugin）
• vite.config.ts、uno.config.ts（UnoCSS）或 src/assets/main.css（Tailwind）
• 样式方案二选一：UnoCSS 或 Tailwind CSS

When to Use

• 用户请求初始化/新建/scaffold 一个 Vue 3 项目
• 用户提到 vue-starter、create-vue、"vue 模板"、"vue 脚手架"
• 用户希望项目自带 ESLint + Stylelint + UnoCSS/Tailwind 预设
• 当前工作目录为空，且用户意图是建立新 Vue 工程

不适用：

• 已存在的 Vue 项目要添加某个依赖 —— 直接用 pnpm add 即可
• 非 Vue 项目（React/Nuxt/SSR）
• 用户想完全自定义脚手架流程，不接受预设配置

Quick Reference

Usage Flow

1. 确认前置条件

   • 已安装 pnpm（脚本内部使用 pnpm create vue@latest 与 pnpm install -D）
   • 当前所在目录是希望创建项目的父目录（项目会创建在 pwd/<project-name> 下）
   • 终端可交互（create-vue 阶段需要 TTY 回答项目名与特性问题）

2. 执行脚本

   在你希望存放新项目的父目录中运行：

   curl -fsSL https://raw.githubusercontent.com/liasica/vue-starter/master/install.sh | bash
   

   如果用户已经指定了项目名和样式方案，直接传参避免额外交互：

   curl -fsSL https://raw.githubusercontent.com/liasica/vue-starter/master/install.sh | bash -s -- my-app tailwind
   

3. 让 create-vue 负责框架问题

   • 脚本不会替用户回答 create-vue 的任何问题（TypeScript/Router/Pinia/Vitest 等）
   • 让用户按需勾选即可

4. 样式方案选择

   • 如果第二个参数已给定 tailwind 或 unocss，跳过菜单
   • 否则脚本会弹出交互菜单（←/→、↑/↓、h/j/k/l、1/2、空格切换，回车确认），默认高亮 Tailwind CSS

5. 脚本自动完成的收尾

   • pnpm install -D 写入 lint/style 相关 devDependencies
   • 生成/覆盖 vite.config.ts
   • 写入 eslint.config.ts、stylelint.config.js、.stylelintignore
   • Tailwind → 写入 src/assets/main.css；UnoCSS → 写入 uno.config.ts

Arguments Reference

Expected Result

脚本成功执行后，在 $(pwd)/<project-name> 目录下可见：

my-app/
├── eslint.config.ts
├── stylelint.config.js
├── .stylelintignore
├── vite.config.ts
├── src/assets/main.css    # Tailwind 方案
├── uno.config.ts          # UnoCSS 方案
├── package.json
├── src/
└── ...（create-vue 生成的其余文件）

后续用户可运行：

cd my-app
pnpm dev       # 启动开发服务器
pnpm lint      # 运行 ESLint
pnpm build     # 生产构建

Common Mistakes

Decision: Tailwind vs UnoCSS

• Tailwind：生态最成熟，文档丰富，团队熟悉度通常更高，默认配置更贴近主流社区
• UnoCSS：原子 CSS，支持 presetAttributify（bg-red-500 可写成属性 bg="red-500"），打包更小，IDE 插件生态略弱

用户没有偏好时，推荐 Tailwind CSS（脚本默认高亮选项）。若明确追求更小打包或原子属性化写法，再选 UnoCSS。

Reference

• 脚本源码：install.sh（位于本仓库根目录）
• 仓库：https://github.com/liasica/vue-starter
• create-vue 官方文档：https://github.com/vuejs/create-vue

Source: liasica/vue-starter — distributed by TomeVault.