@doyuli/create-vue 0.1.2 → 0.2.1

package/bin/index.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import '../dist/index.js'
+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,7 +63,7 @@ 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");
@@ -65,6 +76,7 @@ function renderTemplates(root, result) {
 	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.2",
+  "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.2"
+    "@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/{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"
+  }
+}