create-project-template-cli 1.0.0

package/template/vue-tailwindcss/src/App.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
+</script>
+
+<template>
+  <header>
+    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+
+    <div class="wrapper">
+      <nav>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
+      </nav>
+      <div class="text-2xl font-bold">tailwindcss</div>
+    </div>
+  </header>
+
+  <RouterView />
+</template>
+
+<style scoped lang="scss">
+header {
+  line-height: 1.5;
+  max-height: 100vh;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+nav {
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+nav a.router-link-exact-active {
+  color: var(--color-text);
+}
+
+nav a.router-link-exact-active:hover {
+  background-color: transparent;
+}
+
+nav a {
+  display: inline-block;
+  padding: 0 1rem;
+  border-left: 1px solid var(--color-border);
+}
+
+nav a:first-of-type {
+  border: 0;
+}
+
+@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;
+  }
+
+  nav {
+    text-align: left;
+    margin-left: -1rem;
+    font-size: 1rem;
+
+    padding: 1rem 0;
+    margin-top: 1rem;
+  }
+}
+</style>

package/template/vue-tailwindcss/src/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/template/vue-tailwindcss/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/template/vue-tailwindcss/src/assets/main.css

@@ -0,0 +1,10 @@
+@import "tailwindcss";
+@import './base.css';
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+
+

package/template/vue-tailwindcss/src/auto-import.d.ts

@@ -0,0 +1,71 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

package/template/vue-tailwindcss/src/axios/index.ts

@@ -0,0 +1,107 @@
+import axios from 'axios'
+
+import router from '../router/index'
+// import { isEqual } from 'lodash-es'
+const request = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+  timeout: 5000,
+  headers: {
+    Authorization: JSON.parse(localStorage.getItem('userInfo') || '{}')['token-web'] || '',
+    noToken: true,
+  },
+})
+const newSet = new Set()
+// 将请求地址和请求参数和方法生成一个字符串
+const genKey = (config: any) => {
+  const { method, url, data } = config
+
+  return data
+    ? [
+        url,
+        method,
+        typeof data !== 'string' ? JSON.stringify(data) : JSON.stringify(JSON.parse(data)),
+      ].join('&')
+    : [url, method].join('&')
+}
+// 添加请求拦截器
+request.interceptors.request.use(
+  (config: any) => {
+    // 获取请求地址和请求参数
+    const key = genKey(config)
+
+    // 每次请求前读取newSet中有没有key
+    if (newSet.has(key)) {
+      // 如果有，说明重复请求，返回一个错误
+      return Promise.reject('重复请求')
+    }
+    // 如果没有，将key添加到newSet中
+    newSet.add(key)
+    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
+    config.headers.Authorization = 'Bear ' + userInfo['token-web'] || ''
+    return config
+  },
+  (error) => {
+    // 对请求错误做些什么
+    return Promise.reject(error)
+  },
+)
+// 添加响应拦截器
+request.interceptors.response.use(
+  (response) => {
+    // 对响应数据做点什么
+
+    const key = genKey(response.config)
+    // 每次请求后删除newSet中的key
+    newSet.delete(key)
+
+    const res = response.data
+    // console.log(response)
+    if (res.code && res.code !== 0) {
+      // `token` 过期或者账号已在别处登录
+      if (res.code === 401 || res.code === 4001) {
+        router.push('/login')
+      }
+
+      return res
+    } else {
+      return res
+    }
+  },
+  (error) => {
+    if (error === '重复请求') {
+      return Promise.reject('重复请求')
+    }
+    console.log(error)
+    const key = genKey(error.config)
+    // 每次请求后删除newSet中的key
+    newSet.delete(key)
+    console.log('添加响应拦截器')
+    if (error.message === 'canceled') {
+      return Promise.reject('取消请求')
+    }
+    if (error.response.data && error.response.data.message) {
+      return error.response.data
+    } else {
+      if (error.response.status === 401) {
+        localStorage.clear()
+
+        return
+      }
+
+      // 对响应错误做点什么
+      if (error.message.indexOf('timeout') != -1) {
+        console.log('网络超时')
+      } else if (error.message == 'Network Error') {
+        console.log('网络连接错误')
+      } else {
+        if (error.response.data) console.log(error.response.data.message)
+        else console.log('接口路径找不到')
+        // ElMessage.error(error.message)
+      }
+      return Promise.reject(error)
+    }
+  },
+)
+
+// 导出 axios 实例
+export default request

package/template/vue-tailwindcss/src/components.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    IconCommunity: typeof import('./components/icons/IconCommunity.vue')['default']
+    IconDocumentation: typeof import('./components/icons/IconDocumentation.vue')['default']
+    IconEcosystem: typeof import('./components/icons/IconEcosystem.vue')['default']
+    IconSupport: typeof import('./components/icons/IconSupport.vue')['default']
+    IconTooling: typeof import('./components/icons/IconTooling.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    TheWelcome: typeof import('./components/TheWelcome.vue')['default']
+    WelcomeItem: typeof import('./components/WelcomeItem.vue')['default']
+  }
+}

package/template/vue-tailwindcss/src/main.ts

@@ -0,0 +1,14 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

package/template/vue-tailwindcss/src/router/index.ts

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      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'),
+    },
+  ],
+})
+
+export default router

package/template/vue-tailwindcss/src/stores/counter.ts

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

package/template/vue-tailwindcss/src/views/AboutView.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/template/vue-tailwindcss/src/views/HomeView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <main>
+    <div>home</div>
+  </main>
+</template>

package/template/vue-tailwindcss/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+// TODO: TS 无法主动发现模块，如果找不到模块，则需要在此使用 declare module 进行配置
+declare module 'element-plus/dist/locale/zh-cn.mjs'
+declare module '*.vue'
+declare module '*.js'
+declare module 'lodash-es'

package/template/vue-tailwindcss/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "lib": ["ESNext", "DOM"],
+    // 配置@别名
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

package/template/vue-tailwindcss/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}

package/template/vue-tailwindcss/tsconfig.node.json

@@ -0,0 +1,34 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*",
+    "vite.config.ts",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "components.d.ts",
+    "auto-imports.d.ts",
+    "env.d.ts"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM"],
+    "types": ["node"],
+    "ignoreDeprecations": "6.0",
+    // 配置@别名
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

package/template/vue-tailwindcss/tsconfig.vitest.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["src/**/__tests__/*", "env.d.ts"],
+  "exclude": [],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

package/template/vue-tailwindcss/vite.config.ts

@@ -0,0 +1,33 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import tailwindcss from '@tailwindcss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+// import Components from 'unplugin-vue-components/vite'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+    tailwindcss(),
+    AutoImport({
+      imports: ['vue'],
+      dts: 'src/auto-import.d.ts',
+
+      eslintrc: {
+        enabled: true, //生成eslint配置
+        filepath: './.eslintrc-auto-import.json', // 指定生成的 ESLint 配置文件路径
+      },
+    }),
+    // Components({
+    //   dts: 'src/components.d.ts',
+    // }),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+})

package/template/vue-tailwindcss/vitest.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/**'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+    },
+  }),
+)

package/utils.js

@@ -0,0 +1,73 @@
+import fs from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+import download from "download-git-repo";
+import ora from "ora";
+
+// 获取当前文件的完整路径（类似 CommonJS 中的 __filename）
+const __filename = fileURLToPath(import.meta.url);
+
+// 获取当前文件所在的目录（类似 CommonJS 中的 __dirname）
+const __dirname = dirname(__filename);
+
+// 模板目录路径（当前文件所在目录下的 template 文件夹）
+
+const TEMPLATES_DIR = path.resolve(__dirname, "./template");
+/**
+ * 读取template文件夹下的目录
+ */
+async function getTemplateList() {
+  try {
+    if (!(await fs.pathExists(TEMPLATES_DIR))) {
+      console.log(chalk.red("读取模板列表失败"));
+      return [];
+    }
+    // 读取子目录
+    const templateList = await fs.readdir(TEMPLATES_DIR, {
+      // 返回目录
+      withFileTypes: true,
+    });
+    // 如果没有目录，返回空数组
+    if (templateList.length === 0) {
+      console.log(chalk.red("当前模板为空,请添加"));
+      return [];
+    }
+    // 过滤出目录
+    const dirs = templateList.filter((item) => item.isDirectory());
+    // 提取目录名
+    const templateNames = dirs.map((item) => {
+      // 名称和value都用文件名
+      const name = item.name;
+
+      return { name, value: name };
+    });
+    templateNames.push({
+      name: "自定义项目",
+      value: "custom",
+    });
+    return templateNames;
+  } catch (error) {
+    console.log(chalk.red("读取模板列表失败"));
+    // console.log(chalk.red(error.message));
+    return [];
+  }
+}
+
+async function downloadCustomTemplate(templatePath, projectPath) {
+  const spinner = ora("正在下载项目模板...").start(); //下载中
+  return new Promise((resolve, reject) => {
+    download(`direct:${templatePath}`, projectPath, { clone: true }, (err) => {
+      if (err) {
+        reject(err);
+        spinner.fail("项目模板下载失败"); //下载失败
+      } else {
+        resolve();
+        // console.log(chalk.green("项目模板下载成功"));
+        spinner.succeed("项目模板下载成功"); //下载成功
+      }
+    });
+  });
+}
+export { getTemplateList, downloadCustomTemplate };