create-vite-vue 1.7.0 → 1.8.0

package/bin/index.js

@@ -7,11 +7,10 @@ import { fileURLToPath } from 'url'
 import { parseExtraPlugins, parseFeatures } from '../lib/features.js'
 import { generateMainFile } from '../lib/mainFile.js'
 import { generatePackageJson } from '../lib/package.js'
+import { setupPlugins } from '../lib/plugins/index.js'
 import { askAutoRoute, askRunDev, chooseFeatures, chooseLanguage, getProjectName } from '../lib/prompts.js'
-import { configureRouter } from '../lib/router.js'
-import { appendTailwind, copyBaseTemplate, copyOptionalTemplates, updateIndexHtml } from '../lib/template.js'
+import { copyBaseTemplate, copyOptionalTemplates, updateIndexHtml } from '../lib/template.js'
 import { checkNodeVersion, detectPackageManager, runCmd } from '../lib/utils.js'
-import { configureVite } from '../lib/viteConfig.js'
 
 // ===================== 常量 =====================
 const requiredVersion = '22.19.0'
@@ -43,21 +42,22 @@ const pkgCommands = {
     // 模板文件处理
     copyBaseTemplate(language, targetDir, __dirname)
     updateIndexHtml(projectName, targetDir)
-    appendTailwind(extraPlugins, targetDir)
     copyOptionalTemplates(features, extraPlugins, language, targetDir, __dirname)
 
+    // 配置插件
+    setupPlugins(features, extraPlugins, {
+      language,
+      targetDir,
+      autoRoute,
+      enableHttps
+    })
+
     // 生成 main 文件
     await generateMainFile(features, extraPlugins, language, targetDir)
 
     // package.json
     generatePackageJson(projectName, features, extraPlugins, autoRoute, enableHttps, language, targetDir, pkgManager)
 
-    // 配置 vite
-    configureVite(language, autoRoute, enableHttps, targetDir)
-
-    // 配置 router
-    configureRouter(features.router, autoRoute, language, targetDir)
-
     // 安装依赖
     runCmd(pkgCommands[pkgManager].install, targetDir)
 

package/lib/plugins/autoRoute.js

@@ -0,0 +1,79 @@
+// lib/plugins/autoRoute.js
+import fs from 'fs'
+import path from 'path'
+
+export function setupAutoRoute (language, targetDir) {
+  setupRouter(language, targetDir)
+  setupVite(language, targetDir)
+}
+
+// ================= router =================
+function setupRouter (language, targetDir) {
+  const routerIndexPath = path.join(
+    targetDir,
+    `src/router/index.${language === 'ts' ? 'ts' : 'js'}`
+  )
+
+  const content = `import { createRouter, createWebHistory } from 'vue-router'
+import routes from '~pages'
+
+routes.unshift({ path: '/', redirect: '/home' })
+
+export default createRouter({ history: createWebHistory(), routes })`
+
+  fs.writeFileSync(routerIndexPath, content)
+}
+
+// ================= vite =================
+function setupVite (language, targetDir) {
+  const viteConfigPath = path.join(
+    targetDir,
+    `vite.config.${language === 'ts' ? 'ts' : 'js'}`
+  )
+
+  if(!fs.existsSync(viteConfigPath)) return
+
+  let viteConfig = fs.readFileSync(viteConfigPath, 'utf-8')
+
+  // import fs
+  if(!viteConfig.includes("import fs from 'fs'")) {
+    viteConfig = `import fs from 'fs'\n${viteConfig}`
+  }
+
+  // import Pages
+  if(!viteConfig.includes("vite-plugin-pages")) {
+    viteConfig = viteConfig.replace(
+      /(import .*?from .*?\n)/,
+      `$1import Pages from 'vite-plugin-pages'\n`
+    )
+  }
+
+  // 插件注入
+  if(!viteConfig.includes("Pages({")) {
+    viteConfig = viteConfig.replace(
+      /plugins:\s*\[/,
+      `plugins: [\n    Pages({
+      dirs: 'src/views',
+      extensions: ['vue'],
+      exclude: ['**/_*.vue'],
+      async extendRoute(route) {
+        const componentPath = path.resolve(process.cwd(), route.component.slice(1))
+        const dirPath = path.dirname(componentPath)
+        const metaFile = path.resolve(dirPath, 'meta.json')
+        if(fs.existsSync(metaFile)) {
+          try {
+            const metaContent = fs.readFileSync(metaFile, 'utf-8')
+            const meta = JSON.parse(metaContent)
+            route.meta = { ...(route.meta || {}), ...meta }
+          } catch(err) {
+            console.warn(\`加载 \${metaFile} 失败:\`, err)
+          }
+        }
+        return { ...route }
+      }
+    }),`
+    )
+  }
+
+  fs.writeFileSync(viteConfigPath, viteConfig)
+}

package/lib/plugins/https.js

@@ -0,0 +1,38 @@
+// lib/plugins/https.js
+import fs from 'fs'
+import path from 'path'
+
+export function setupHttps (targetDir) {
+  const viteConfigPathTs = path.join(targetDir, 'vite.config.ts')
+  const viteConfigPathJs = path.join(targetDir, 'vite.config.js')
+
+  const viteConfigPath = fs.existsSync(viteConfigPathTs)
+    ? viteConfigPathTs
+    : viteConfigPathJs
+
+  if(!viteConfigPath || !fs.existsSync(viteConfigPath)) return
+
+  let viteConfig = fs.readFileSync(viteConfigPath, 'utf-8')
+
+  // ================== 1. 注入 import ==================
+  if(!viteConfig.includes("vite-plugin-mkcert")) {
+    viteConfig = viteConfig.replace(
+      /(import .*?from .*?\n)/,
+      `$1import mkcert from 'vite-plugin-mkcert'\n`
+    )
+  }
+
+  // ================== 2. 注入插件 ==================
+  if(!viteConfig.includes('mkcert()')) {
+    viteConfig = viteConfig.replace(
+      /plugins:\s*\[/,
+      `plugins: [\n    mkcert(),`
+    )
+  }
+
+  fs.writeFileSync(viteConfigPath, viteConfig)
+
+  // ================== 3. 提示 ==================
+  console.log('🔐 已启用 HTTPS（mkcert）')
+  console.log('👉 首次运行会自动生成本地证书，请稍等...')
+}

package/lib/plugins/index.js

@@ -0,0 +1,23 @@
+// lib/plugins/index.js
+import { setupAutoRoute } from './autoRoute.js'
+import { setupHttps } from './https.js'
+import { setupTailwind } from './tailwind.js'
+
+export function setupPlugins (features, extraPlugins, context) {
+  const { language, targetDir, autoRoute, enableHttps } = context
+
+  // Tailwind
+  if(extraPlugins.includes('tailwind')) {
+    setupTailwind(targetDir)
+  }
+
+  // HTTPS
+  if(enableHttps) {
+    setupHttps(targetDir)
+  }
+
+  // 自动路由
+  if(features.router && autoRoute) {
+    setupAutoRoute(language, targetDir)
+  }
+}

package/lib/plugins/tailwind.js

@@ -0,0 +1,14 @@
+// lib/plugins/tailwind.js
+import fs from 'fs'
+import path from 'path'
+
+export function setupTailwind (targetDir) {
+  const stylePath = path.join(targetDir, 'src/style.css')
+  if(!fs.existsSync(stylePath)) return
+
+  const original = fs.readFileSync(stylePath, 'utf-8')
+
+  if(!original.includes('@import "tailwindcss";')) {
+    fs.writeFileSync(stylePath, `@import "tailwindcss";\n${original}`)
+  }
+}

package/lib/template.js

@@ -14,15 +14,6 @@ export function updateIndexHtml (projectName, targetDir) {
   fs.writeFileSync(indexPath, indexContent.replace(/<title>.*<\/title>/, `<title>${projectName}</title>`))
 }
 
-export function appendTailwind (extraPlugins, targetDir) {
-  if(!extraPlugins.includes('tailwind')) return
-  const stylePath = path.join(targetDir, 'src/style.css')
-  const original = fs.readFileSync(stylePath, 'utf-8')
-  if(!original.startsWith('@import "tailwindcss";')) {
-    fs.writeFileSync(stylePath, `@import "tailwindcss";\n${original}`)
-  }
-}
-
 export function copyOptionalTemplates (features, extraPlugins, language, targetDir, __dirname) {
   const copy = name => {
     fs.cpSync(path.resolve(__dirname, `../template/${name}`), targetDir, { recursive: true })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vite-vue",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "基于Vite+Vue3创建基础项目模板",
   "main": "index.js",
   "author": "YwaiX",

package/lib/router.js

@@ -1,21 +0,0 @@
-// lib/router.js
-import fs from 'fs'
-import path from 'path'
-
-export function configureRouter (routerEnabled, autoRoute, language, targetDir) {
-  if(!routerEnabled) return
-  const routerIndexPath = path.join(targetDir, `src/router/index.${language === 'ts' ? 'ts' : 'js'}`)
-  const content = autoRoute
-    ? `import { createRouter, createWebHistory } from 'vue-router'
-import routes from '~pages'
-
-routes.unshift({ path: '/', redirect: '/home' })
-
-export default createRouter({ history: createWebHistory(), routes })`
-    : `import { createRouter, createWebHistory } from 'vue-router'
-
-const routes = [ { path: '/', component: () => import('@/views/home/index.vue') } ]
-
-export default createRouter({ history: createWebHistory(), routes })`
-  fs.writeFileSync(routerIndexPath, content)
-}

package/lib/viteConfig.js

@@ -1,24 +0,0 @@
-// lib/viteConfig.js
-import fs from 'fs'
-import path from 'path'
-
-export function configureVite (language, autoRoute, enableHttps, targetDir) {
-  const viteConfigPath = path.join(targetDir, `vite.config.${language === 'ts' ? 'ts' : 'js'}`)
-  if(!fs.existsSync(viteConfigPath)) return
-  let viteConfig = fs.readFileSync(viteConfigPath, 'utf-8')
-
-  // mkcert
-  if(enableHttps && !viteConfig.includes("vite-plugin-mkcert")) {
-    viteConfig = viteConfig.replace(/(import .*?from .*?\n)/, `$1import mkcert from 'vite-plugin-mkcert'\n`)
-    viteConfig = viteConfig.replace(/plugins:\s*\[/, `plugins: [\n    mkcert(),`)
-  }
-
-  // 自动路由
-  if(autoRoute) {
-    if(!viteConfig.includes("import fs from 'fs'")) viteConfig = `import fs from 'fs'\n${viteConfig}`
-    if(!viteConfig.includes("import Pages from 'vite-plugin-pages'")) viteConfig = viteConfig.replace(/(import .*?from .*?\n)/, `$1import Pages from 'vite-plugin-pages'\n`)
-    if(!viteConfig.includes("Pages({")) viteConfig = viteConfig.replace(/plugins:\s*\[/, `plugins: [\n    Pages({\n      dirs: 'src/views',\n      extensions: ['vue'],\n      exclude: ['**/_*.vue'],\n      async extendRoute(route) {\n        const componentPath = path.resolve(process.cwd(), route.component.slice(1))\n        const dirPath = path.dirname(componentPath)\n        const metaFile = path.resolve(dirPath, 'meta.json')\n        if(fs.existsSync(metaFile)) {\n          try {\n            const metaContent = fs.readFileSync(metaFile, 'utf-8')\n            const meta = JSON.parse(metaContent)\n            route.meta = { ...(route.meta || {}), ...meta }\n          } catch(err) {\n            console.warn(\`加载 \${metaFile} 失败:\`, err)\n          }\n        }\n        return { ...route }\n      }\n    }),`)
-  }
-
-  fs.writeFileSync(viteConfigPath, viteConfig)
-}