@doyuli/create-vue 0.1.1 → 0.2.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 doyuli
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2025 doyuli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,9 +1,9 @@
-### Usage
-
-```bash
-npx @doyuli/create-vue
-
-# or
-
-npm create @doyuli/vue
-```
+### Usage
+
+```bash
+npx @doyuli/create-vue
+
+# or
+
+npm create @doyuli/vue
+```

package/bin/index.js

@@ -1,2 +1,2 @@
-#!/usr/bin/env node
-import '../dist/index.js'
+#!/usr/bin/env node
+import '../dist/index.mjs'

package/dist/{index.js → index.mjs}

@@ -4,7 +4,7 @@ import process from "node:process";
 import { fileURLToPath } from "node:url";
 import { parseArgs } from "node:util";
 import { intro, outro } from "@clack/prompts";
-import { getCommand, getPackageManager, preOrderDirectoryTraverse, renderFile, renderTemplate, setupProject, setupPrompts } from "@doyuli/kits-core";
+import { getCommand, getPackageManager, preOrderDirectoryTraverse, renderFile, renderTemplate, setupFeatures, setupProject, setupPrompts, setupSelect } from "@doyuli/kits-core";
 import ejs from "ejs";
 import pico from "picocolors";
 
@@ -24,6 +24,13 @@ const FEATURE_OPTIONS = [
 		label: "Vitest（单元测试）"
 	}
 ];
+const CSS_FRAMEWORK_OPTIONS = [{
+	value: "unocss",
+	label: "UnoCSS"
+}, {
+	value: "tailwindcss",
+	label: "TailwindCSS"
+}];
 
 //#endregion
 //#region src/index.ts
@@ -34,7 +41,11 @@ const FEATURE_OPTIONS = [
 		allowPositionals: true
 	});
 	intro(pico.magenta(DEFAULT_BANNER));
-	const { result, targetDir } = await setupPrompts(positionals[0], FEATURE_OPTIONS);
+	const inputTargetDir = positionals[0];
+	const { result, targetDir } = await setupPrompts(inputTargetDir, [setupFeatures("features", { options: [...FEATURE_OPTIONS] }), setupSelect("cssFramework", {
+		message: "请选择 CSS 框架：",
+		options: [...CSS_FRAMEWORK_OPTIONS]
+	})]);
 	const root = await setupProject(cwd, result, targetDir);
 	renderTemplates(root, result);
 	outro(getOutroMessage(root, cwd));
@@ -52,20 +63,20 @@ function getOutroMessage(root, cwd) {
 	return message;
 }
 function renderTemplates(root, result) {
-	const { features = [] } = result;
+	const { features, cssFramework } = result;
 	const needsAutoRouter = features.includes("unplugin-vue-router");
 	const needsGitHooks = features.includes("simple-git-hooks");
 	const needsVitest = features.includes("vitest");
 	const templateRoot = fileURLToPath(new URL("../template", import.meta.url));
 	const render = (templateName) => {
-		const templateDir = path.resolve(templateRoot, templateName);
-		renderTemplate(templateDir, root);
+		renderTemplate(path.resolve(templateRoot, templateName), root);
 	};
 	render("base");
 	render("eslint");
 	render("tsconfig");
 	render(needsAutoRouter ? "router/unplugin" : "router/default");
 	if (needsGitHooks) render("git-hooks");
+	render(cssFramework === "tailwindcss" ? "css/tailwindcss" : "css/unocss");
 	const rootTsConfig = {
 		files: [],
 		references: [{ path: "./tsconfig.node.json" }, { path: "./tsconfig.app.json" }]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@doyuli/create-vue",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "@doyuli/create-vue",
   "license": "MIT",
   "repository": {
@@ -34,7 +34,7 @@
     "@clack/prompts": "^0.11.0",
     "ejs": "3.1.10",
     "picocolors": "^1.1.1",
-    "@doyuli/kits-core": "^0.1.1"
+    "@doyuli/kits-core": "^0.2.1"
   },
   "scripts": {
     "dev": "tsdown --watch",

package/template/base/package.json

@@ -11,7 +11,6 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
-    "@unocss/reset": "^66.5.1",
     "@vueuse/core": "^13.9.0",
     "pinia": "^3.0.3",
     "vue": "^3.5.18"
@@ -23,7 +22,6 @@
     "@vue/tsconfig": "^0.7.0",
     "prettier": "3.6.2",
     "typescript": "~5.8.0",
-    "unocss": "^66.5.1",
     "unplugin-auto-import": "^20.1.0",
     "vite": "^7.0.6",
     "vite-plugin-vue-devtools": "^8.0.0",

package/template/base/src/layouts/DefaultLayout.vue

@@ -1,11 +1,11 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>
-    <main>
-      <slot />
-    </main>
-  </div>
-</template>
-
-<style scoped></style>
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <main>
+      <slot />
+    </main>
+  </div>
+</template>
+
+<style scoped></style>

package/template/base/src/{main.ts → main.ts.ejs}

@@ -3,8 +3,12 @@ import { createApp } from 'vue'
 import App from './App.vue'
 
 import router from './router'
+<%_ if (cssFramework === 'unocss') { -%>
 import 'virtual:uno.css'
 import '@unocss/reset/tailwind-compat.css'
+<%_ } else { -%>
+import './assets/main.css'
+<%_ } -%>
 
 const app = createApp(App)
 

package/template/base/src/pages/about/index.vue.ejs

@@ -17,7 +17,7 @@ definePage({
     <div class="max-w-2xl w-full space-y-6">
       <p class="text-gray-700 leading-relaxed">
         这是一个自用 Vue 3 开发模板，旨在快速搭建项目。
-        集成了 <span class="font-semibold">Vite、Vue Router、Pinia、UnoCSS、VueUse</span>。
+        集成了 <span class="font-semibold">Vite、Vue Router、Pinia、UnoCSS/TailwindCSS、VueUse</span>。
       </p>
 
       <div class="bg-white p-6 rounded-xl shadow space-y-3">

package/template/base/src/pages/home/index.vue.ejs

@@ -16,7 +16,7 @@ definePage({
     <div class="text-center space-y-4">
       <SiteTitle title="Vue Template" />
       <p class="text-gray-600 max-w-lg mx-auto">
-        自用 Vue 3 开发模板，集成 Vite、Pinia、Vue Router、UnoCSS 等常用工具。
+        自用 Vue 3 开发模板，集成 Vite、Pinia、Vue Router、UnoCSS/TailwindCSS 等常用工具。
       </p>
       <div class="flex flex-wrap gap-4 justify-center mt-4">
         <router-link

package/template/base/vite.config.ts.ejs

@@ -1,7 +1,11 @@
 import { fileURLToPath, URL } from 'node:url'
 
 import vue from '@vitejs/plugin-vue'
+<%_ if (cssFramework === 'unocss') { -%>
 import UnoCSS from 'unocss/vite'
+<%_ } else { -%>
+import tailwindcss from '@tailwindcss/vite'
+<%_ } -%>
 import AutoImport from 'unplugin-auto-import/vite'
 <%_ if (features.includes('unplugin-vue-router')) { -%>
 import { VueRouterAutoImports } from 'unplugin-vue-router'
@@ -31,7 +35,11 @@ export default defineConfig({
       ],
       dts: 'types/auto-imports.d.ts',
     }),
+    <%_ if (cssFramework === 'unocss') { -%>
     UnoCSS(),
+    <%_ } else { -%>
+    tailwindcss(),
+    <%_ } -%>
     vueDevTools(),
   ],
   resolve: {

package/template/css/tailwindcss/package.json

@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.10",
+    "tailwindcss": "^4.1.10"
+  }
+}

package/template/css/tailwindcss/src/assets/main.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/template/css/unocss/package.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@unocss/reset": "^66.5.1"
+  },
+  "devDependencies": {
+    "unocss": "^66.5.1"
+  }
+}

package/template/{base → css/unocss}/unocss.config.ts

@@ -1,21 +1,21 @@
-import {
-  defineConfig,
-  presetAttributify,
-  presetIcons,
-  presetUno,
-} from 'unocss'
-
-export default defineConfig({
-  presets: [
-    presetUno(),
-    presetAttributify(),
-    presetIcons({
-      scale: 1.2,
-      warn: true,
-      extraProperties: {
-        'display': 'inline-block',
-        'vertical-align': 'middle',
-      },
-    }),
-  ],
-})
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetUno,
+} from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      scale: 1.2,
+      warn: true,
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+      },
+    }),
+  ],
+})

package/template/git-hooks/scripts/verify-commit.js

@@ -1,29 +1,41 @@
-// @ts-check
-
-import { readFileSync } from 'node:fs'
-import path from 'node:path'
-import process from 'node:process'
-import pico from 'picocolors'
-
-const msgPath = path.resolve('.git/COMMIT_EDITMSG')
-const msg = readFileSync(msgPath, 'utf-8').trim()
-
-// eslint-disable-next-line regexp/no-unused-capturing-group
-const commitRE = /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/
-
-if (!commitRE.test(msg)) {
-  console.log()
-  console.error(
-    `  ${pico.white(pico.bgRed(' ERROR '))} ${pico.red(
-      `invalid commit message format.`,
-    )}\n\n${pico.red(
-      `  Proper commit message format is required for automated changelog generation. Examples:\n\n`,
-    )}    ${pico.green(`feat(compiler): add 'comments' option`)}\n`
-    + `    ${pico.green(
-      `fix(v-model): handle events on blur (close #28)`,
-    )}\n\n${pico.red(
-      `  See https://github.com/vuejs/core/blob/main/.github/commit-convention.md for more details.\n`,
-    )}`,
-  )
-  process.exit(1)
-}
+// @ts-check
+
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import process from 'node:process'
+import pico from 'picocolors'
+
+const msgPath = path.resolve('.git/COMMIT_EDITMSG')
+const msg = readFileSync(msgPath, 'utf-8').trim()
+
+// eslint-disable-next-line regexp/no-unused-capturing-group
+const COMMIT_RE = /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/
+
+if (!COMMIT_RE.test(msg)) {
+  console.log()
+  console.error(
+    `  ${pico.bgRed(pico.white(' ERROR '))} ${pico.red(`Invalid commit message format.`)}\n\n`
+    + `  ${pico.dim('Help us keep a meaningful git history by following')}\n\n`
+
+    + `  ${pico.yellow('Standard Format:')}\n`
+    + `  ${pico.green('<type>[optional scope]: <description>')}\n\n`
+
+    + `  ${pico.cyan('Common Types:')}\n`
+    + `  ${pico.green('  feat')}     ${pico.dim('A new feature')}\n`
+    + `  ${pico.green('  fix')}      ${pico.dim('A bug fix')}\n`
+    + `  ${pico.green('  docs')}     ${pico.dim('Documentation only changes')}\n`
+    + `  ${pico.green('  style')}    ${pico.dim('Changes that do not affect the meaning of the code')}\n`
+    + `  ${pico.green('  refactor')} ${pico.dim('Code change that neither fixes a bug nor adds a feature')}\n`
+    + `  ${pico.green('  perf')}     ${pico.dim('A code change that improves performance')}\n`
+    + `  ${pico.green('  test')}     ${pico.dim('Adding missing tests or correcting existing tests')}\n`
+    + `  ${pico.green('  build')}    ${pico.dim('Changes that affect the build system or external dependencies')}\n`
+    + `  ${pico.green('  ci')}       ${pico.dim('Changes to CI configuration files and scripts')}\n`
+    + `  ${pico.green('  chore')}    ${pico.dim('Other changes that don\'t modify src or test files')}\n`
+    + `  ${pico.green('  revert')}   ${pico.dim('Reverts a previous commit')}\n\n`
+
+    + `  ${pico.cyan('Correct Examples:')}\n`
+    + `  ${pico.white('  feat(ui): add secondary button style')}\n`
+    + `  ${pico.white('  fix(auth): resolve token expiration issue')}\n\n`,
+  )
+  process.exit(1)
+}