create-banana 1.0.1 → 1.1.0

package/template/base/src/components/TheWelcome.vue

@@ -1,12 +1,12 @@
 <script setup>
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
+import WelcomeItem from './WelcomeItem.vue';
+import DocumentationIcon from './icons/IconDocumentation.vue';
+import ToolingIcon from './icons/IconTooling.vue';
+import EcosystemIcon from './icons/IconEcosystem.vue';
+import CommunityIcon from './icons/IconCommunity.vue';
+import SupportIcon from './icons/IconSupport.vue';
 
-const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
+const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md');
 </script>
 
 <template>
@@ -17,7 +17,9 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
     <template #heading>Documentation</template>
 
     Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">
+      official documentation
+    </a>
     provides you with all information you need to get started.
   </WelcomeItem>
 
@@ -28,23 +30,39 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
     <template #heading>Tooling</template>
 
     This project is served and bundled with
-    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
+    <a
+      href="https://vite.dev/guide/features.html"
+      target="_blank"
+      rel="noopener"
+    >
+      Vite
+    </a>
+    . The recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">
+      VSCode
+    </a>
     +
-    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
-      >Vue - Official</a
-    >. If you need to test your components and web pages, check out
+    <a
+      href="https://github.com/vuejs/language-tools"
+      target="_blank"
+      rel="noopener"
+    >
+      Vue - Official
+    </a>
+    . If you need to test your components and web pages, check out
     <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
     and
     <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
     /
-    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
+    <a href="https://playwright.dev/" target="_blank" rel="noopener">
+      Playwright </a
+    >.
 
     <br />
 
     More instructions are available in
-    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
+    <a href="javascript:void(0)" @click="openReadmeInEditor">
+      <code>README.md</code> </a
     >.
   </WelcomeItem>
 
@@ -56,11 +74,21 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
 
     Get official tools and libraries for your project:
     <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener"
+      >Vue Router</a
+    >,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener"
+      >Vue Test Utils</a
+    >, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener"
+      >Vue Dev Tools</a
+    >. If you need more resources, we suggest paying
+    <a
+      href="https://github.com/vuejs/awesome-vue"
+      target="_blank"
+      rel="noopener"
+      >Awesome Vue</a
+    >
     a visit.
   </WelcomeItem>
 
@@ -73,10 +101,15 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
     Got stuck? Ask your question on
     <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
     (our official Discord server), or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+    <a
+      href="https://stackoverflow.com/questions/tagged/vue.js"
+      target="_blank"
+      rel="noopener"
       >StackOverflow</a
     >. You should also follow the official
-    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
+    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener"
+      >@vuejs.org</a
+    >
     Bluesky account or the
     <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
     X account for latest news in the Vue world.
@@ -88,8 +121,10 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
     </template>
     <template #heading>Support Vue</template>
 
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+    As an independent project, Vue relies on community backing for its
+    sustainability. You can help us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener"
+      >becoming a sponsor</a
+    >.
   </WelcomeItem>
 </template>

package/template/base/src/components/icons/IconCommunity.vue

@@ -1,5 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    fill="currentColor"
+  >
     <path
       d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
     />

package/template/base/src/components/icons/IconDocumentation.vue

@@ -1,5 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="17"
+    fill="currentColor"
+  >
     <path
       d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
     />

package/template/base/src/components/icons/IconEcosystem.vue

@@ -1,5 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="20"
+    fill="currentColor"
+  >
     <path
       d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
     />

package/template/base/src/components/icons/IconSupport.vue

@@ -1,5 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    fill="currentColor"
+  >
     <path
       d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
     />

package/template/base/src/main.js.ejs

@@ -3,5 +3,16 @@ import { createApp } from 'vue'
 import App from './App.vue'
 <% if(usePinia) { %>import { createPinia } from 'pinia'<% } %>
 <% if(usePiniaPluginPersistedstate) { %>import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'<% } %>
+<% if(useVueRouter) { %>import router from './router/index.js';<% } %>
 
-createApp(App)<% if(usePinia) { %>.use(createPinia()<% if(usePiniaPluginPersistedstate) { %>.use(piniaPluginPersistedstate)<% } %>)<% } %>.mount('#app')
+createApp(App)
+<% if(usePinia) { %>
+.use(createPinia()
+<% if(usePiniaPluginPersistedstate) { %>
+.use(piniaPluginPersistedstate)
+<% } %>
+)
+<% } %>
+<% if(useVueRouter) { %>
+.use(router)
+<% } %>.mount('#app')

package/template/base/vite.config.js

@@ -1,8 +1,8 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueDevTools from 'vite-plugin-vue-devtools';
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -12,4 +12,4 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
-})
+});

package/template/pinia/counter.js

@@ -1,11 +1,11 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
+import { ref, computed } from 'vue';
+import { defineStore } from 'pinia';
 
 export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
+  const count = ref(0);
+  const doubleCount = computed(() => count.value * 2);
   function increment() {
-    count.value++
+    count.value++;
   }
-  return { count, doubleCount, increment }
-})
+  return { count, doubleCount, increment };
+});

package/template/pinia/pinia-plugin-persistedstate/key.js

@@ -1,11 +1,11 @@
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
 
 export const useKeyStore = defineStore(
   'key',
   () => {
-    const key = ref('')
-    return { key }
+    const key = ref('Hello Pinia Persisted State!');
+    return { key };
   },
-  { persist: true },
-)
+  { persist: true }
+);

package/template/vue-router/components/TitleText.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1><slot></slot></h1>
+  </div>
+</template>
+
+<style scoped>
+div {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+</style>

package/template/vue-router/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "vue-router": "^4.6.4"
+  }
+}

package/template/vue-router/router/index.js

@@ -0,0 +1,32 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const router = createRouter({
+  // TODO: 根据需要选择 history 模式
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    // redirect root to /home
+    { path: '/', redirect: '/home' },
+    {
+      path: '/home',
+      name: 'home',
+      component: HomeView,
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/AboutView.vue'),
+    },
+    // 404 Not Found route
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'notFound',
+      component: () => import('../views/NotFound.vue'),
+    },
+  ],
+});
+
+export default router;

package/template/vue-router/views/AboutView.vue.ejs

@@ -0,0 +1,21 @@
+<script setup>
+  import TitleText from '@/components/TitleText.vue';
+  <% if(usePiniaPluginPersistedstate) { %>
+  import {
+    useKeyStore
+  } from '@/stores/key.js';
+  const keyStore = useKeyStore();
+  <% } %>
+</script>
+
+<template>
+  <TitleText>This is an about page
+    <% if(usePiniaPluginPersistedstate) { %>
+    ,<div>
+      the key is:
+      <span style="color: white; font-weight: bold">
+        {{ keyStore.key }}</span>
+    </div>
+    <% } %>
+  </TitleText>
+</template>

package/template/vue-router/views/HomeView.vue

@@ -0,0 +1,7 @@
+<script setup>
+import TheWelcome from '../components/TheWelcome.vue';
+</script>
+
+<template>
+  <TheWelcome></TheWelcome>
+</template>

package/template/vue-router/views/NotFound.vue

@@ -0,0 +1,7 @@
+<script setup>
+import TitleText from '@/components/TitleText.vue';
+</script>
+
+<template>
+  <TitleText>404 Not Found</TitleText>
+</template>

package/utils/URL.js

@@ -1,13 +1,15 @@
 // 获得相对路径和模板目录路径的工具函数
-import path from 'path'
-import { fileURLToPath } from 'url'
+import path from 'path';
+import { fileURLToPath } from 'url';
 
 // 拼接相对路径
 export const relativePath = (fileURL, targetURL) => {
-  const __filename = fileURLToPath(fileURL)
-  const __dirname = path.dirname(__filename)
-  return path.join(__dirname, targetURL)
-}
+  const __filename = fileURLToPath(fileURL);
+  const __dirname = path.dirname(__filename);
+  return path.join(__dirname, targetURL);
+};
 
 // 获取模板目录路径
-export const templatePath = fileURLToPath(new URL('../template', import.meta.url))
+export const templatePath = fileURLToPath(
+  new URL('../template', import.meta.url)
+);

package/utils/figletPrint.js

@@ -1,5 +1,5 @@
 // print BANANA in big money-se font using figlet
-import figlet from 'figlet'
+import figlet from 'figlet';
 
 const printString = async (str) => {
   try {
@@ -9,11 +9,11 @@ const printString = async (str) => {
       verticalLayout: 'default',
       width: 80,
       whitespaceBreak: true,
-    })
+    });
   } catch (err) {
-    console.log('Something went wrong...')
-    console.dir(err)
+    console.log('Something went wrong...');
+    console.dir(err);
   }
-}
+};
 
-export default printString
+export default printString;

package/utils/pathExists.js

@@ -1,8 +1,9 @@
 // 确认路径是否存在，若存在则提示是否覆盖
 // 若选择覆盖则删除已存在的文件夹，并新建一个文件夹
 // 若选择不覆盖则退出程序
-import fs from 'fs-extra'
-import { select } from '@inquirer/prompts'
+import fs from 'fs-extra';
+import { select } from '@inquirer/prompts';
+import chalk from 'chalk';
 
 const confirmPathExists = async (projectName, projectDir) => {
   try {
@@ -10,28 +11,29 @@ const confirmPathExists = async (projectName, projectDir) => {
     if (await fs.pathExists(projectDir)) {
       // 如果存在就提示是否要覆盖
       const isOverwrite = await select({
-        message: `The target folder "${projectName}" is not empty. Overwrite?`,
+        message: `The target folder "${projectName}" is not empty. ${chalk.yellow('Overwrite')}?`,
         choices: [
           { name: 'Yes', value: true },
           { name: 'No', value: false },
         ],
-      })
+      });
       if (!isOverwrite) {
         // TODO: 放一个更友好的提示
         //  例如：X操作取消(换英文)
-        console.log('canceled!')
+        console.log('canceled!');
         // 退出程序
-        process.exit(0)
+        process.exit(0);
       } else {
         // 删除已存在的文件夹并新建一个文件夹
-        await fs.remove(projectDir)
-        await fs.mkdir(projectDir)
+        await fs.remove(projectDir);
+        await fs.mkdir(projectDir);
       }
     }
   } catch (err) {
     // TODO: 放一个更友好的提示
-    console.error(err)
+    console.error(err);
+    process.exit(1);
   }
-}
+};
 
-export default confirmPathExists
+export default confirmPathExists;

package/utils/rainbow.js

@@ -1,26 +1,31 @@
 // use chalk to print text in rainbow colors
-import chalk from 'chalk'
+import chalk from 'chalk';
 
 function hslToRgb(h, s, l) {
-  s /= 100
-  l /= 100
+  s /= 100;
+  l /= 100;
 
-  const k = (n) => (n + h / 30) % 12
-  const a = s * Math.min(l, 1 - l)
-  const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))
+  const k = (n) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) =>
+    l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
 
-  return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))]
+  return [
+    Math.round(255 * f(0)),
+    Math.round(255 * f(8)),
+    Math.round(255 * f(4)),
+  ];
 }
 
 function rainbowGradient(text) {
   return text
     .split('')
     .map((char, i) => {
-      const hue = (i / text.length) * 360
-      const [r, g, b] = hslToRgb(hue, 100, 50)
-      return chalk.rgb(r, g, b)(char)
+      const hue = (i / text.length) * 360;
+      const [r, g, b] = hslToRgb(hue, 100, 50);
+      return chalk.rgb(r, g, b)(char);
     })
-    .join('')
+    .join('');
 }
 
-export default rainbowGradient
+export default rainbowGradient;

package/utils/template/base/appVue.js

@@ -1,18 +1,30 @@
 // 渲染App.vue，通过模板匹配pinia的使用情况
-import ejs from 'ejs'
-import { templatePath } from '#utils/URL.js'
-import fs from 'fs-extra'
-import path from 'path'
+import ejs from 'ejs';
+import { templatePath } from '#utils/URL.js';
+import fs from 'fs-extra';
+import path from 'path';
 
-const addAppVue = async (projectName, usePinia, usePiniaPluginPersistedstate) => {
+const addAppVue = async (
+  projectName,
+  usePinia,
+  usePiniaPluginPersistedstate,
+  useVueRouter
+) => {
   await fs.writeFile(
     path.join(process.cwd(), projectName, 'src', 'App.vue'),
-    ejs.render(await fs.readFile(path.join(templatePath, 'base', 'src', 'App.vue.ejs'), 'utf-8'), {
-      usePinia,
-      usePiniaPluginPersistedstate,
-    }),
-  )
-  await fs.remove(path.join(process.cwd(), projectName, 'src', 'App.vue.ejs'))
-}
+    ejs.render(
+      await fs.readFile(
+        path.join(templatePath, 'base', 'src', 'App.vue.ejs'),
+        'utf-8'
+      ),
+      {
+        usePinia,
+        usePiniaPluginPersistedstate,
+        useVueRouter,
+      }
+    )
+  );
+  await fs.remove(path.join(process.cwd(), projectName, 'src', 'App.vue.ejs'));
+};
 
-export default addAppVue
+export default addAppVue;

package/utils/template/base/base.js

@@ -1,19 +1,19 @@
 // 获取base模板
-import path from 'path'
-import { templatePath } from '#utils/URL.js'
-import fs from 'fs-extra'
+import path from 'path';
+import { templatePath } from '#utils/URL.js';
+import fs from 'fs-extra';
 
 const createBaseProject = async (projectName) => {
-  const basePath = path.join(templatePath, 'base')
-  const projectDir = path.join(process.cwd(), projectName)
+  const basePath = path.join(templatePath, 'base');
+  const projectDir = path.join(process.cwd(), projectName);
   // 复制模板文件到目标目录
-  fs.copySync(basePath, projectDir)
+  fs.copySync(basePath, projectDir);
 
-  const packageJsonPath = path.join(projectDir, 'package.json')
-  const packageJson = await fs.readJson(packageJsonPath)
-  packageJson.name = projectName
+  const packageJsonPath = path.join(projectDir, 'package.json');
+  const packageJson = await fs.readJson(packageJsonPath);
+  packageJson.name = projectName;
   // 写回package.json文件
-  await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 })
-}
+  await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+};
 
-export default createBaseProject
+export default createBaseProject;

package/utils/template/base/main.js

@@ -1,18 +1,30 @@
 // 渲染main.js，通过模板匹配pinia的使用情况
-import ejs from 'ejs'
-import { templatePath } from '#utils/URL.js'
-import fs from 'fs-extra'
-import path from 'path'
+import ejs from 'ejs';
+import { templatePath } from '#utils/URL.js';
+import fs from 'fs-extra';
+import path from 'path';
 
-const addMain = async (projectName, usePinia, usePiniaPluginPersistedstate) => {
+const addMain = async (
+  projectName,
+  usePinia,
+  usePiniaPluginPersistedstate,
+  useVueRouter
+) => {
   await fs.writeFile(
     path.join(process.cwd(), projectName, 'src', 'main.js'),
-    ejs.render(await fs.readFile(path.join(templatePath, 'base', 'src', 'main.js.ejs'), 'utf-8'), {
-      usePinia,
-      usePiniaPluginPersistedstate,
-    }),
-  )
-  await fs.remove(path.join(process.cwd(), projectName, 'src', 'main.js.ejs'))
-}
+    ejs.render(
+      await fs.readFile(
+        path.join(templatePath, 'base', 'src', 'main.js.ejs'),
+        'utf-8'
+      ),
+      {
+        usePinia,
+        usePiniaPluginPersistedstate,
+        useVueRouter,
+      }
+    )
+  );
+  await fs.remove(path.join(process.cwd(), projectName, 'src', 'main.js.ejs'));
+};
 
-export default addMain
+export default addMain;