create-banana 1.0.2 → 1.1.0

package/bin/index.js

@@ -15,6 +15,9 @@ import addMain from '#utils/template/base/main.js';
 import { select } from '@inquirer/prompts';
 import addPiniaPluginPersistedstate from '#utils/template/pinia/piniaPluginPersistedstate.js';
 import chalk from 'chalk';
+import boxen from 'boxen';
+import addVueRouter from '#utils/template/vueRouter/vueRouter.js';
+import addAboutView from '#utils/template/vueRouter/aboutView.js';
 
 // print BANANA in rainbow colors
 const log = console.log;
@@ -34,12 +37,14 @@ const feats = await checkbox({
     { name: 'Eslint', value: 'eslint' },
     { name: 'Prettier', value: 'prettier' },
     { name: 'Pinia', value: 'pinia' },
+    { name: 'Vue-Router', value: 'vue-router' },
   ],
 });
 
 const useEslint = feats.includes('eslint');
 const usePrettier = feats.includes('prettier');
 const usePinia = feats.includes('pinia');
+const useVueRouter = feats.includes('vue-router');
 
 let usePiniaPluginPersistedstate = false;
 if (usePinia) {
@@ -54,8 +59,18 @@ if (usePinia) {
 
 // TODO: 把一类型的功能整合到一起
 await createBaseProject(projectName);
-await addAppVue(projectName, usePinia, usePiniaPluginPersistedstate);
-await addMain(projectName, usePinia, usePiniaPluginPersistedstate);
+await addAppVue(
+  projectName,
+  usePinia,
+  usePiniaPluginPersistedstate,
+  useVueRouter
+);
+await addMain(
+  projectName,
+  usePinia,
+  usePiniaPluginPersistedstate,
+  useVueRouter
+);
 
 await addPinia(projectName, usePinia, usePiniaPluginPersistedstate);
 await addPiniaPluginPersistedstate(projectName, usePiniaPluginPersistedstate);
@@ -65,6 +80,9 @@ await addEslintConfig(projectName, usePrettier, useEslint);
 
 await addPrettier(projectName, usePrettier);
 
+await addVueRouter(projectName, useVueRouter);
+await addAboutView(projectName, usePiniaPluginPersistedstate, useVueRouter);
+
 // 参考create-vue的颜色
 const greenColor = [22, 198, 12];
 
@@ -75,15 +93,15 @@ log(
   )
 );
 
-const eslintStr = chalk
-  .rgb(...greenColor)
-  .underline(` cd ${projectName} && pnpm i && pnpm lint && pnpm dev  \n`);
-const prettierStr = chalk
-  .rgb(...greenColor)
-  .underline(` cd ${projectName} && pnpm i && pnpm format && pnpm dev  \n`);
-const noFormatStr = chalk
-  .rgb(...greenColor)
-  .underline(` cd ${projectName} && pnpm i && pnpm dev  \n`);
+const eslintStr = chalk.rgb(...greenColor)(
+  `\n  cd ${projectName} && pnpm i && pnpm lint && pnpm dev  \n`
+);
+const prettierStr = chalk.rgb(...greenColor)(
+  `\n  cd ${projectName} && pnpm i && pnpm format && pnpm dev  \n`
+);
+const noFormatStr = chalk.rgb(...greenColor)(
+  `\n  cd ${projectName} && pnpm i && pnpm dev  \n`
+);
 
 let outStr = '';
 useEslint
@@ -92,12 +110,29 @@ useEslint
     ? (outStr = prettierStr)
     : (outStr = noFormatStr);
 
-log(outStr);
+log(
+  chalk.cyan(
+    boxen(outStr, {
+      title: 'commands',
+      titleAlignment: 'center',
+    })
+  ),
+  '\n'
+);
+
 // 初始化Git
 log(rainbowGradient('Initialize Git using the following command:\n'));
 // TODO: 以后有commitizen再改这里
 log(
-  chalk
-    .rgb(...greenColor)
-    .underline(' git init && git add . && git commit -m "Initial commit"  ')
+  chalk.cyan(
+    boxen(
+      chalk.rgb(...greenColor)(
+        '\n  git init && git add . && git commit -m "Initial commit"  \n'
+      ),
+      {
+        title: 'commands',
+        titleAlignment: 'center',
+      }
+    )
+  )
 );

package/{eslint.config.mjs → eslint.config.js}

@@ -1,34 +1,23 @@
 import js from '@eslint/js';
 import globals from 'globals';
+import pluginVue from 'eslint-plugin-vue';
 import json from '@eslint/json';
 import { defineConfig, globalIgnores } from 'eslint/config';
+
 import prettierPlugin from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
 
 export default defineConfig([
   {
-    files: ['**/*.{js,mjs,cjs}'],
-    plugins: { js, prettier: prettierPlugin },
+    files: ['**/*.{js,mjs,cjs,vue}'],
+    plugins: { js },
     extends: ['js/recommended'],
     languageOptions: { globals: globals.node },
-    rules: {
-      'prettier/prettier': [
-        'warn',
-        {
-          printWidth: 80,
-          tabWidth: 2,
-          useTabs: false,
-          semi: true,
-          singleQuote: true,
-          quoteProps: 'as-needed',
-          jsxSingleQuote: false,
-          trailingComma: 'es5',
-          bracketSpacing: true,
-          bracketSameLine: false,
-          arrowParens: 'always',
-          endOfLine: 'auto',
-        },
-      ],
-    },
+  },
+  {
+    files: ['**/*.vue'],
+    plugins: { vue: pluginVue },
+    extends: [pluginVue.configs['flat/essential']],
   },
   {
     files: ['**/*.json'],
@@ -37,6 +26,15 @@ export default defineConfig([
     extends: ['json/recommended'],
   },
 
+  // 全局 Prettier 配置
+  {
+    plugins: { prettier: prettierPlugin },
+    extends: [prettierConfig],
+    rules: {
+      'prettier/prettier': ['warn'], // 不符合 prettier 风格时显示 warning
+    },
+  },
+
   globalIgnores([
     'node_modules/*',
     'dist/*',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-banana",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/TMname1/create-banana.git"
@@ -27,6 +27,7 @@
   "license": "ISC",
   "dependencies": {
     "@inquirer/prompts": "^8.1.0",
+    "boxen": "^8.0.1",
     "chalk": "^5.6.2",
     "ejs": "^3.1.10",
     "figlet": "^1.9.4",
@@ -37,7 +38,9 @@
     "@eslint/json": "^0.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-vue": "^10.6.2",
     "globals": "^16.5.0",
     "husky": "^8.0.0",
     "lint-staged": "^16.2.7",

package/template/Eslint/eslint.config.js.ejs

@@ -15,7 +15,7 @@ export default defineConfig([
 files: ['**/*.{js,mjs,cjs,vue}'],
 plugins: { js },
 extends: ['js/recommended'],
-languageOptions: { globals: { ...globals.browser } },
+languageOptions: { globals: globals.browser },
 },
 {
 files: ["**/*.vue"],

package/template/base/src/App.vue.ejs

@@ -11,6 +11,11 @@
     useKeyStore
   } from './stores/key'
   <% } %>
+  <% if(useVueRouter) { %>import {
+    useRoute
+  }
+  from 'vue-router'
+  <% } %>
 
   <% if(usePinia) { %>
   const counterStore = useCounterStore()
@@ -18,6 +23,9 @@
   <% if(usePiniaPluginPersistedstate) { %>
   const keyStore = useKeyStore()
   <% } %>
+  <% if(useVueRouter) { %>
+  const route = useRoute()
+  <% } %>
 </script>
 
 <template>
@@ -29,11 +37,35 @@
       <% if(usePinia) { %><button class="piniaBtn" @click="counterStore.increment">Count is:
         {{ counterStore.count }}</button><% } %>
       <% if(usePiniaPluginPersistedstate) { %><input class="persistInp" v-model="keyStore.key" placeholder="Enter a key to persist" /><% } %>
+      <% if(useVueRouter) { %>
+      <!-- 按钮切换页面 -->
+      <div>
+        <button class="routerBtn">
+          <router-link to="/home">
+            <span :class="{ 'active-link': route.name === 'home' }">
+              Home
+            </span>
+          </router-link>
+        </button>
+        <span style="margin: 0 5px">|</span>
+        <button class="routerBtn">
+          <router-link to="/about">
+            <span :class="{ 'active-link': route.name === 'about' }">
+              About
+            </span>
+          </router-link>
+        </button>
+      </div><% } %>
     </div>
   </header>
 
   <main>
+    <% if(useVueRouter) { %>
+    <router-view />
+    <% } %>
+    <% if(!useVueRouter) { %>
     <TheWelcome />
+    <% } %>
   </main>
 </template>
 
@@ -76,6 +108,24 @@
     <%
   }
 
+  %><%if(useVueRouter) {
+    %>.routerBtn {
+      margin-top: 1rem;
+      padding: 0.5rem 1rem;
+      font-size: 1rem;
+      border: none;
+      background: none;
+    }
+
+    .active-link {
+      font-weight: bold;
+      color: hsla(160, 100%, 30%, 1);
+      border-bottom: 2px solid hsla(160, 100%, 37%, 1);
+    }
+
+    <%
+  }
+
   %>@media (min-width: 1024px) {
     header {
       display: flex;

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/pinia/pinia-plugin-persistedstate/key.js

@@ -4,7 +4,7 @@ import { defineStore } from 'pinia';
 export const useKeyStore = defineStore(
   'key',
   () => {
-    const key = ref('');
+    const key = ref('Hello Pinia Persisted State!');
     return { key };
   },
   { 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/pathExists.js

@@ -3,6 +3,7 @@
 // 若选择不覆盖则退出程序
 import fs from 'fs-extra';
 import { select } from '@inquirer/prompts';
+import chalk from 'chalk';
 
 const confirmPathExists = async (projectName, projectDir) => {
   try {
@@ -10,7 +11,7 @@ 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 },

package/utils/template/base/appVue.js

@@ -7,7 +7,8 @@ import path from 'path';
 const addAppVue = async (
   projectName,
   usePinia,
-  usePiniaPluginPersistedstate
+  usePiniaPluginPersistedstate,
+  useVueRouter
 ) => {
   await fs.writeFile(
     path.join(process.cwd(), projectName, 'src', 'App.vue'),
@@ -19,6 +20,7 @@ const addAppVue = async (
       {
         usePinia,
         usePiniaPluginPersistedstate,
+        useVueRouter,
       }
     )
   );

package/utils/template/base/main.js

@@ -4,7 +4,12 @@ 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(
@@ -15,6 +20,7 @@ const addMain = async (projectName, usePinia, usePiniaPluginPersistedstate) => {
       {
         usePinia,
         usePiniaPluginPersistedstate,
+        useVueRouter,
       }
     )
   );

package/utils/template/vueRouter/aboutView.js

@@ -0,0 +1,29 @@
+import ejs from 'ejs';
+import { templatePath } from '#utils/URL.js';
+import fs from 'fs-extra';
+import path from 'path';
+
+const addAboutView = async (
+  projectName,
+  usePiniaPluginPersistedstate,
+  useVueRouter
+) => {
+  if (!useVueRouter) return;
+  await fs.writeFile(
+    path.join(process.cwd(), projectName, 'src', 'views', 'AboutView.vue'),
+    ejs.render(
+      await fs.readFile(
+        path.join(templatePath, 'vue-router', 'views', 'AboutView.vue.ejs'),
+        'utf-8'
+      ),
+      {
+        usePiniaPluginPersistedstate,
+      }
+    )
+  );
+  await fs.remove(
+    path.join(process.cwd(), projectName, 'src', 'AboutView.vue.ejs')
+  );
+};
+
+export default addAboutView;

package/utils/template/vueRouter/vueRouter.js

@@ -0,0 +1,46 @@
+import { templatePath } from '../../URL.js';
+import path from 'path';
+import fs from 'fs-extra';
+
+const addVueRouter = async (projectName, flag) => {
+  // 没有选择vueRouter则直接返回
+  if (!flag) return;
+  // 路径
+  const templateVueRouterPath = path.join(templatePath, 'vue-router');
+  const targetPath = path.join(process.cwd(), projectName);
+  const targetSrcPath = path.join(targetPath, 'src');
+  const targetPackageJsonPath = path.join(targetPath, 'package.json');
+
+  // 文件
+  const targetPkg = await fs.readJson(targetPackageJsonPath);
+  const vueRouterPkg = await fs.readJson(
+    path.join(templateVueRouterPath, 'package.json')
+  );
+
+  // 添加package.json的内容
+  targetPkg.dependencies = {
+    ...targetPkg.dependencies,
+    ...vueRouterPkg.dependencies,
+  };
+
+  await fs.writeJson(targetPackageJsonPath, targetPkg, { spaces: 2 });
+
+  // 复制components文件
+  fs.copySync(
+    path.join(templateVueRouterPath, 'components'),
+    path.join(targetSrcPath, 'components'),
+    { overwrite: false }
+  );
+  // 复制router文件
+  fs.copySync(
+    path.join(templateVueRouterPath, 'router'),
+    path.join(targetSrcPath, 'router')
+  );
+  // 复制views文件
+  fs.copySync(
+    path.join(templateVueRouterPath, 'views'),
+    path.join(targetSrcPath, 'views')
+  );
+};
+
+export default addVueRouter;