create-banana 1.0.1 → 1.1.0

package/.prettierrc

@@ -1,7 +1,14 @@
 {
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
   "singleQuote": true,
-  "printWidth": 100,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
   "endOfLine": "auto"
 }

package/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "files.associations": {
+    "*.ejs": "ejs",
+    "*.vue.ejs": "ejs",
+    "*.js.ejs": "ejs"
+  },
+  "emmet.includeLanguages": {
+    "ejs": "html"
+  }
+}

package/bin/index.js

@@ -1,63 +1,138 @@
 #!/usr/bin/env node
-import printString from '#utils/figletPrint.js'
-import rainbowGradient from '#utils/rainbow.js'
-import { input } from '@inquirer/prompts'
-import createBaseProject from '#utils/template/base/base.js'
-import { checkbox } from '@inquirer/prompts'
-import addEslint from '#utils/template/eslint/eslint.js'
-import addPrettier from '#utils/template/prettier.js'
-import addEslintConfig from '#utils/template/eslint/eslintConfig.js'
-import addPinia from '#utils/template/pinia/pinia.js'
-import addAppVue from '#utils/template/base/appVue.js'
-import path from 'path'
-import confirmPathExists from '#utils/pathExists.js'
-import addMain from '#utils/template/base/main.js'
-import { select } from '@inquirer/prompts'
-import addPiniaPluginPersistedstate from '#utils/template/pinia/piniaPluginPersistedstate.js'
+import printString from '#utils/figletPrint.js';
+import rainbowGradient from '#utils/rainbow.js';
+import { input } from '@inquirer/prompts';
+import createBaseProject from '#utils/template/base/base.js';
+import { checkbox } from '@inquirer/prompts';
+import addEslint from '#utils/template/eslint/eslint.js';
+import addPrettier from '#utils/template/prettier.js';
+import addEslintConfig from '#utils/template/eslint/eslintConfig.js';
+import addPinia from '#utils/template/pinia/pinia.js';
+import addAppVue from '#utils/template/base/appVue.js';
+import path from 'path';
+import confirmPathExists from '#utils/pathExists.js';
+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
-console.log(rainbowGradient(await printString('BANANA')))
+const log = console.log;
+log(rainbowGradient(await printString('BANANA')));
 
-const projectName = await input({ message: 'Enter your project name:', required: true })
+const projectName = await input({
+  message: `Enter your ${chalk.yellow('project name')}:`,
+  required: true,
+});
 
 // 确认路径存在
-await confirmPathExists(projectName, path.join(process.cwd(), projectName))
+await confirmPathExists(projectName, path.join(process.cwd(), projectName));
 
 const feats = await checkbox({
-  message: 'Please select the features to include:',
+  message: `Please select the ${chalk.yellow('features')} to include:`,
   choices: [
     { 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 useEslint = feats.includes('eslint');
+const usePrettier = feats.includes('prettier');
+const usePinia = feats.includes('pinia');
+const useVueRouter = feats.includes('vue-router');
 
-let usePiniaPluginPersistedstate = false
+let usePiniaPluginPersistedstate = false;
 if (usePinia) {
   usePiniaPluginPersistedstate = await select({
-    message: `Do you want to use pinia-plugin-persistedstate for Pinia state persistence?`,
+    message: `Do you want to use ${chalk.yellow.bold('pinia-plugin-persistedstate')} for Pinia state persistence?`,
     choices: [
       { name: 'Yes', value: true },
       { name: 'No', value: false },
     ],
-  })
+  });
 }
 
 // TODO: 把一类型的功能整合到一起
-await createBaseProject(projectName)
-await addAppVue(projectName, usePinia, usePiniaPluginPersistedstate)
-await addMain(projectName, usePinia, usePiniaPluginPersistedstate)
+await createBaseProject(projectName);
+await addAppVue(
+  projectName,
+  usePinia,
+  usePiniaPluginPersistedstate,
+  useVueRouter
+);
+await addMain(
+  projectName,
+  usePinia,
+  usePiniaPluginPersistedstate,
+  useVueRouter
+);
 
-await addPinia(projectName, usePinia, usePiniaPluginPersistedstate)
-await addPiniaPluginPersistedstate(projectName, usePiniaPluginPersistedstate)
+await addPinia(projectName, usePinia, usePiniaPluginPersistedstate);
+await addPiniaPluginPersistedstate(projectName, usePiniaPluginPersistedstate);
 
-await addEslint(projectName, useEslint)
-await addEslintConfig(projectName, usePrettier, useEslint)
+await addEslint(projectName, useEslint);
+await addEslintConfig(projectName, usePrettier, useEslint);
 
-await addPrettier(projectName, useEslint, usePrettier)
+await addPrettier(projectName, usePrettier);
 
-// TODO: 输出后续操作，例如lint，git
+await addVueRouter(projectName, useVueRouter);
+await addAboutView(projectName, usePiniaPluginPersistedstate, useVueRouter);
+
+// 参考create-vue的颜色
+const greenColor = [22, 198, 12];
+
+// 安装依赖以及格式化提示
+log(
+  rainbowGradient(
+    '\nProject initialization complete. You may now execute the following commands:\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
+  ? (outStr = eslintStr)
+  : usePrettier
+    ? (outStr = prettierStr)
+    : (outStr = noFormatStr);
+
+log(
+  chalk.cyan(
+    boxen(outStr, {
+      title: 'commands',
+      titleAlignment: 'center',
+    })
+  ),
+  '\n'
+);
+
+// 初始化Git
+log(rainbowGradient('Initialize Git using the following command:\n'));
+// TODO: 以后有commitizen再改这里
+log(
+  chalk.cyan(
+    boxen(
+      chalk.rgb(...greenColor)(
+        '\n  git init && git add . && git commit -m "Initial commit"  \n'
+      ),
+      {
+        title: 'commands',
+        titleAlignment: 'center',
+      }
+    )
+  )
+);

package/eslint.config.js

@@ -0,0 +1,59 @@
+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,vue}'],
+    plugins: { js },
+    extends: ['js/recommended'],
+    languageOptions: { globals: globals.node },
+  },
+  {
+    files: ['**/*.vue'],
+    plugins: { vue: pluginVue },
+    extends: [pluginVue.configs['flat/essential']],
+  },
+  {
+    files: ['**/*.json'],
+    plugins: { json },
+    language: 'json/json',
+    extends: ['json/recommended'],
+  },
+
+  // 全局 Prettier 配置
+  {
+    plugins: { prettier: prettierPlugin },
+    extends: [prettierConfig],
+    rules: {
+      'prettier/prettier': ['warn'], // 不符合 prettier 风格时显示 warning
+    },
+  },
+
+  globalIgnores([
+    'node_modules/*',
+    'dist/*',
+    'build/*',
+    'out/*',
+    '.next/*',
+    '.nuxt/*',
+    'coverage/*',
+    'public/*',
+    'assets/*',
+    '.cache/*',
+    '.temp/*',
+    '.tmp/*',
+    '*.min.js',
+    '*.bundle.js',
+    'package-lock.json',
+    'yarn.lock',
+    'pnpm-lock.yaml',
+    '.env*',
+    'docs/.vitepress/dist/*',
+  ]),
+]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-banana",
-  "version": "1.0.1",
+  "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",
@@ -51,7 +54,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "commit": "cz",
-    "format": "prettier --write .",
+    "lint": "eslint . --fix --cache",
+    "format": "prettier --write --experimental-cli .",
     "lint-staged": "lint-staged"
   }
 }

package/readme.md

@@ -1 +1,6 @@
-我的vue脚手架，目前的功能有eslint,prettier
+我的vue脚手架，目前实现的功能有:
+
+- eslint
+- prettier
+- pinia
+  - pinia-plugin-persistedstate

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

@@ -4,36 +4,75 @@ import pluginVue from 'eslint-plugin-vue'
 import json from '@eslint/json'
 import markdown from '@eslint/markdown'
 import css from '@eslint/css'
-import { defineConfig } from 'eslint/config'
-<% if(usePrettier) { %>import prettierConfig from "eslint-config-prettier";<% } %>
+import { defineConfig, globalIgnores } from 'eslint/config'
+<% if (usePrettier) { %>
+import prettierPlugin from 'eslint-plugin-prettier'
+import prettierConfig from "eslint-config-prettier";
+<% } %>
 
 export default defineConfig([
-  {
-    files: ['**/*.{js,mjs,cjs,vue}'],
-    plugins: { js },
-    extends: ['js/recommended'],
-    languageOptions: { globals: { ...globals.browser, ...globals.node } },
-  },
-  pluginVue.configs['flat/essential'],
-  { files: ['**/*.json'], plugins: { json }, language: 'json/json', extends: ['json/recommended'] },
-  {
-    files: ['**/*.jsonc'],
-    plugins: { json },
-    language: 'json/jsonc',
-    extends: ['json/recommended'],
-  },
-  {
-    files: ['**/*.json5'],
-    plugins: { json },
-    language: 'json/json5',
-    extends: ['json/recommended'],
-  },
-  {
-    files: ['**/*.md'],
-    plugins: { markdown },
-    language: 'markdown/gfm',
-    extends: ['markdown/recommended'],
-  },
-  { files: ['**/*.css'], plugins: { css }, language: 'css/css', extends: ['css/recommended'] },
-  <% if(usePrettier) { %>prettierConfig,<% } %>
-])
+{
+files: ['**/*.{js,mjs,cjs,vue}'],
+plugins: { js },
+extends: ['js/recommended'],
+languageOptions: { globals: globals.browser },
+},
+{
+files: ["**/*.vue"],
+plugins: { vue: pluginVue },
+extends: [pluginVue.configs["flat/essential"]],
+},
+{ files: ['**/*.json'], plugins: { json }, language: 'json/json', extends: ['json/recommended'] },
+{
+files: ['**/*.jsonc'],
+plugins: { json },
+language: 'json/jsonc',
+extends: ['json/recommended'],
+},
+{
+files: ['**/*.json5'],
+plugins: { json },
+language: 'json/json5',
+extends: ['json/recommended'],
+},
+{
+files: ['**/*.md'],
+plugins: { markdown },
+language: 'markdown/gfm',
+extends: ['markdown/recommended'],
+},
+{ files: ['**/*.css'], plugins: { css }, language: 'css/css', extends: ['css/recommended'] },
+
+<% if (usePrettier) { %>
+// 全局 Prettier 配置
+{
+plugins: { prettier: prettierPlugin },
+extends: [prettierConfig],
+rules: {
+'prettier/prettier': ['warn'], // 不符合 prettier 风格时显示 warning
+},
+},
+<% } %>
+
+globalIgnores([
+"node_modules/*",
+"dist/*",
+"build/*",
+"out/*",
+".next/*",
+".nuxt/*",
+"coverage/*",
+"public/*",
+"assets/*",
+".cache/*",
+".temp/*",
+".tmp/*",
+"*.min.js",
+"*.bundle.js",
+"package-lock.json",
+"yarn.lock",
+"pnpm-lock.yaml",
+".env*",
+"docs/.vitepress/dist/*",
+]),
+])

package/template/Eslint/package.json

@@ -1,7 +1,6 @@
 {
   "scripts": {
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint": "eslint . --fix --cache"
   },
   "devDependencies": {
     "@eslint/css": "^0.14.1",

package/template/Prettier/.prettierrc

@@ -10,5 +10,5 @@
   "bracketSpacing": true,
   "bracketSameLine": false,
   "arrowParens": "always",
-  "endOfLine": "lf"
+  "endOfLine": "auto"
 }

package/template/Prettier/package.json

@@ -1,10 +1,10 @@
 {
   "scripts": {
-    "format": "prettier --write .",
-    "format:check": "prettier --check ."
+    "format": "prettier --write --experimental-cli src/"
   },
   "devDependencies": {
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
     "prettier": "3.7.4"
   }
 }

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

@@ -1,11 +1,31 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-<% if(usePinia) { %>import { useCounterStore } from './stores/counter' <% } %>
-<% if(usePiniaPluginPersistedstate) { %>import { useKeyStore } from './stores/key' <% } %>
+  import HelloWorld from './components/HelloWorld.vue'
+  import TheWelcome from './components/TheWelcome.vue'
+  <% if(usePinia) { %>
+  import {
+    useCounterStore
+  } from './stores/counter'
+  <% } %>
+  <% if(usePiniaPluginPersistedstate) { %>
+  import {
+    useKeyStore
+  } from './stores/key'
+  <% } %>
+  <% if(useVueRouter) { %>import {
+    useRoute
+  }
+  from 'vue-router'
+  <% } %>
 
-<% if(usePinia) { %>const counterStore = useCounterStore()<% } %>
-<% if(usePiniaPluginPersistedstate) { %>const keyStore = useKeyStore()<% } %>
+  <% if(usePinia) { %>
+  const counterStore = useCounterStore()
+  <% } %>
+  <% if(usePiniaPluginPersistedstate) { %>
+  const keyStore = useKeyStore()
+  <% } %>
+  <% if(useVueRouter) { %>
+  const route = useRoute()
+  <% } %>
 </script>
 
 <template>
@@ -14,62 +34,113 @@ import TheWelcome from './components/TheWelcome.vue'
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
-      <% if(usePinia) { %><button class="piniaBtn" @click="counterStore.increment">Count is: {{ counterStore.count }}</button><% } %>
+      <% 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>
 
 <style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-<% if(usePinia) { %>.piniaBtn {
-  margin-top: 1rem;
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
-  border: none;
-  border-radius: 4px;
-  background-color: #42b983;
-  color: white;
-  cursor: pointer;
-}<% } %>
-
-<% if(usePiniaPluginPersistedstate) { %>.persistInp {
-  margin-top: 1rem;
-  padding: 0.5rem;
-  font-size: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  width: 100%;
-  max-width: 300px;
-}<% } %>
-
-@media (min-width: 1024px) {
   header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+    line-height: 1.5;
   }
 
   .logo {
-    margin: 0 2rem 0 0;
+    display: block;
+    margin: 0 auto 2rem;
+  }
+
+  <% if(usePinia) {
+    %>.piniaBtn {
+      margin-top: 1rem;
+      padding: 0.5rem 1rem;
+      font-size: 1rem;
+      border: none;
+      border-radius: 4px;
+      background-color: #42b983;
+      color: white;
+      cursor: pointer;
+    }
+
+    <%
+  }
+
+  %><% if(usePiniaPluginPersistedstate) {
+    %>.persistInp {
+      margin-top: 1rem;
+      padding: 0.5rem;
+      font-size: 1rem;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      width: 100%;
+      max-width: 300px;
+    }
+
+    <%
   }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+  %><%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;
+      place-items: center;
+      padding-right: calc(var(--section-gap) / 2);
+    }
+
+    .logo {
+      margin: 0 2rem 0 0;
+    }
+
+    header .wrapper {
+      display: flex;
+      place-items: flex-start;
+      flex-wrap: wrap;
+    }
   }
-}
-</style>
+</style>

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

@@ -4,7 +4,7 @@ defineProps({
     type: String,
     required: true,
   },
-})
+});
 </script>
 
 <template>