create-vite-vue 1.0.0

package/bin/index.js

@@ -0,0 +1,211 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process'
+import fs from 'fs'
+import path from 'path'
+import prompts from 'prompts'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+async function createProject () {
+  // 1️⃣ 输入项目名
+  let projectName
+  while (true) {
+    const res = await prompts({
+      type: 'text',
+      name: 'projectName',
+      message: '📦 项目名称',
+      validate: v => v ? true : '项目名不能为空'
+    })
+    projectName = res.projectName
+    if (!projectName) process.exit(1)
+
+    const targetDir = path.resolve(process.cwd(), projectName)
+    if (fs.existsSync(targetDir)) {
+      console.log('❌ 目录已存在，请重新输入')
+      continue
+    }
+    break
+  }
+
+  const targetDir = path.resolve(process.cwd(), projectName)
+
+  const { language } = await prompts({
+    type: 'select',
+    name: 'language',
+    message: '请选择项目语言',
+    choices: [
+      { title: 'JavaScript', value: 'js' },
+      { title: 'TypeScript', value: 'ts' }
+    ]
+  })
+
+
+  // 2️⃣ 功能选择
+  const features = await prompts([
+    {
+      type: 'select',
+      name: 'router',
+      message: '是否使用 vue-router？',
+      choices: [{ title: 'Yes', value: true }, { title: 'No', value: false }]
+    },
+    {
+      type: 'select',
+      name: 'pinia',
+      message: '是否使用 Pinia（含持久化）？',
+      choices: [{ title: 'Yes', value: true }, { title: 'No', value: false }]
+    },
+    {
+      type: 'select',
+      name: 'axios',
+      message: '是否使用 Axios？',
+      choices: [{ title: 'Yes', value: true }, { title: 'No', value: false }]
+    },
+    {
+      type: 'select',
+      name: 'ui',
+      message: '请选择 UI 框架',
+      choices: [
+        { title: 'Element Plus（PC）', value: 'element' },
+        { title: 'Vant（Mobile）', value: 'vant' },
+        { title: '不使用 UI 框架', value: 'none' }
+      ]
+    }
+  ])
+
+  // 3️⃣ 是否立即运行 dev
+  const { runDev } = await prompts({
+    type: 'select',
+    name: 'runDev',
+    message: '是否立即运行 npm run dev？',
+    choices: [{ title: 'Yes', value: true }, { title: 'No', value: false }]
+  })
+
+  // 4️⃣ 拷贝 base 模板
+  const baseTemplate = language === 'ts' ? 'base-ts' : 'base-js'
+  fs.cpSync(
+    path.resolve(__dirname, `../template/${baseTemplate}`),
+    targetDir,
+    { recursive: true }
+  )
+
+  // 4️⃣-1️⃣ 替换 index.html 的 title
+  const indexPath = path.join(targetDir, 'index.html')
+  if (fs.existsSync(indexPath)) {
+    const indexContent = fs.readFileSync(indexPath, 'utf-8')
+    fs.writeFileSync(
+      indexPath,
+      indexContent.replace(/<title>.*<\/title>/, `<title>${projectName}</title>`)
+    )
+  }
+
+  // 5️⃣ 拷贝可选模板
+  const copy = name => {
+    fs.cpSync(path.resolve(__dirname, `../template/${name}`), targetDir, { recursive: true })
+  }
+  features.router && copy(language === 'ts' ? 'router-ts' : 'router-js')
+  features.pinia && copy(language === 'ts' ? 'pinia-ts' : 'pinia-js')
+  features.axios && copy(language === 'ts' ? 'axios-ts' : 'axios-js')
+
+  // 6️⃣ 生成 main.js
+  const mainFile = language === 'ts' ? 'main.ts' : 'main.js'
+  const mainTplPath = path.join(targetDir, `src/${mainFile}.tpl`)
+  let main = fs.readFileSync(mainTplPath, 'utf-8')
+
+  const replacements = {
+    '/* __ROUTER_IMPORT__ */': features.router ? "import router from './router'" : '',
+    '/* __PINIA_IMPORT__ */': features.pinia
+      ? "import { createPinia } from 'pinia'\nimport persistedstate from 'pinia-plugin-persistedstate'"
+      : '',
+    '/* __ELEMENT_IMPORT__ */': features.ui === 'element'
+      ? `import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'`
+      : '',
+    '/* __VANT_IMPORT__ */': features.ui === 'vant'
+      ? `import Vant from 'vant'
+import 'vant/lib/index.css'`
+      : '',
+    '/* __ROUTER_USE__ */': features.router ? 'app.use(router)' : '',
+    '/* __PINIA_USE__ */': features.pinia
+      ? 'app.use(createPinia().use(persistedstate))'
+      : '',
+    '/* __ELEMENT_USE__ */': features.ui === 'element'
+      ? `app.use(ElementPlus)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}`
+      : '',
+    '/* __VANT_USE__ */': features.ui === 'vant'
+      ? 'app.use(Vant)'
+      : ''
+  }
+
+  function escapeRegExp (str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  }
+
+  for (const [placeholder, content] of Object.entries(replacements)) {
+    if (content) {
+      main = main.replace(placeholder, content)
+    } else {
+      const re = new RegExp(`^\\s*${escapeRegExp(placeholder)}\\s*$\\n?`, 'gm')
+      main = main.replace(re, '')
+    }
+  }
+
+  fs.writeFileSync(
+    path.join(targetDir, `src/${mainFile}`),
+    main
+  )
+  fs.unlinkSync(mainTplPath)
+
+  // 7️⃣ 生成 package.json
+  const pkgTpl = path.join(targetDir, 'package.json.tpl')
+  if (fs.existsSync(pkgTpl)) {
+    let pkg = fs.readFileSync(pkgTpl, 'utf-8')
+
+    const optionalDeps = {}
+    if (features.router) optionalDeps['vue-router'] = '^4.4.0'
+    if (features.pinia) {
+      optionalDeps['pinia'] = '^2.2.2'
+      optionalDeps['pinia-plugin-persistedstate'] = '^3.2.1'
+    }
+    if (features.axios) optionalDeps['axios'] = '^1.7.7'
+    if (features.ui === 'element') {
+      optionalDeps['element-plus'] = '^2.8.8'
+      optionalDeps['@element-plus/icons-vue'] = '^2.3.1'
+    }
+    if (features.ui === 'vant') {
+      optionalDeps['vant'] = '^4.9.22'
+    }
+
+    let depsStr = ''
+    const keys = Object.keys(optionalDeps)
+    if (keys.length > 0) {
+      depsStr = ',\n' + keys.map(k => `    "${k}": "${optionalDeps[k]}"`).join(',\n')
+    }
+
+    pkg = pkg
+      .replace('__PROJECT_NAME__', projectName)
+      .replace('__OPTIONAL_DEP__', depsStr)
+
+    fs.writeFileSync(path.join(targetDir, 'package.json'), pkg)
+    fs.unlinkSync(pkgTpl)
+  }
+
+  // 8️⃣ 安装依赖
+  console.log('📦 安装依赖中...')
+  execSync('npm install', { cwd: targetDir, stdio: 'inherit' })
+
+  // 9️⃣ 运行 dev
+  if (runDev) {
+    console.log('🚀 启动开发服务器...')
+    execSync('npm run dev', { cwd: targetDir, stdio: 'inherit' })
+  } else {
+    console.log(`\n✅ 项目创建完成\n👉 cd ${projectName}\n👉 npm run dev\n`)
+  }
+}
+
+createProject()

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "create-vite-vue",
+  "version": "1.0.0",
+  "description": "基于Vite+Vue3创建基础项目模板",
+  "main": "index.js",
+  "author": "YwaiX",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "create-vite-vue": "bin/index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "vite",
+    "vue",
+    "js",
+    "ts",
+    "vue-router",
+    "pinia",
+    "axios"
+  ],
+  "dependencies": {
+    "prompts": "^2.4.2"
+  }
+}

package/template/axios-js/src/utils/request.js

@@ -0,0 +1,18 @@
+import axios from 'axios'
+
+const service = axios.create({
+  baseURL: '/api',
+  timeout: 10000
+})
+
+service.interceptors.request.use(
+  config => config,
+  error => Promise.reject(error)
+)
+
+service.interceptors.response.use(
+  response => response.data,
+  error => Promise.reject(error)
+)
+
+export default service

package/template/axios-ts/src/utils/request.ts

@@ -0,0 +1,18 @@
+import axios from 'axios'
+
+const service = axios.create({
+  baseURL: '/api',
+  timeout: 10000
+})
+
+service.interceptors.request.use(
+  config => config,
+  error => Promise.reject(error)
+)
+
+service.interceptors.response.use(
+  response => response.data,
+  error => Promise.reject(error)
+)
+
+export default service

package/template/base-js/README.md

@@ -0,0 +1,32 @@
+# Vite + Vue3 + js + vue-router + pinia + element-plus + axios + less
+
+本项目基于Vite + Vue3 + js + vue-router + pinia + element-plus + axios + less创建
+
+
+
+运行方式
+
+```text
+cd my-project
+npm i
+npm run dev
+```
+
+
+
+需要修改的地方
+
+```text
+utils/request.js
+router/index.js
+```
+
+
+
+可以修改的地方
+
+```text
+vite.config.js
+```
+
+该文件中的`server.proxy`,`server.host`,`server.port`可以进行更改,其他地方不建议更改

package/template/base-js/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vue-template-js</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/template/base-js/jsconfig.json

@@ -0,0 +1,15 @@
+// jsconfig.json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/template/base-js/package.json.tpl

@@ -0,0 +1,23 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "less": "^4.5.1",
+    "tslib": "^2.8.1",
+    "vue": "^3.5.24"__OPTIONAL_DEP__
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}

package/template/base-js/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template/base-js/src/App.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="welcome-container">
+    <div class="welcome-card">
+      <h1 class="welcome-title">欢迎来到我的项目！</h1>
+      <p class="welcome-desc">
+        这是一个 Vue 3 + JS 版基础项目的欢迎页面示例。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+
+</script>
+
+<style scoped>
+/* 外层容器，全屏居中 */
+.welcome-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #4facfe, #00f2fe);
+}
+
+/* 卡片样式 */
+.welcome-card {
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 40px;
+  border-radius: 16px;
+  text-align: center;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  animation: fadeIn 1s ease;
+}
+
+/* 标题 */
+.welcome-title {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+/* 描述 */
+.welcome-desc {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+  color: #555;
+}
+
+/* 标题淡入动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

package/template/base-js/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/template/base-js/src/main.js.tpl

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+/* __ELEMENT_IMPORT__ */
+/* __ROUTER_IMPORT__ */
+/* __PINIA_IMPORT__ */
+/* __VANT_IMPORT__ */
+
+const app = createApp(App)
+
+/* __ELEMENT_USE__ */
+/* __ROUTER_USE__ */
+/* __PINIA_USE__ */
+/* __VANT_USE__ */
+
+app.mount('#app')

package/template/base-js/src/style.css

@@ -0,0 +1,39 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.el-header,
+.el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
+
+.el-aside {
+  background-color: #D3DCE6;
+  color: #333;
+  text-align: center;
+  line-height: 200px;
+}
+
+.el-main {
+  background-color: #E9EEF3;
+  color: #333;
+  text-align: center;
+  line-height: 160px;
+}
+
+body>.el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}

package/template/base-js/vite.config.js

@@ -0,0 +1,25 @@
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import { defineConfig } from 'vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 20000,
+    strictPort: false,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: path => path.replace(/^\/api/, '')
+      }
+    }
+  }
+})

package/template/base-ts/README.md

@@ -0,0 +1,32 @@
+# Vite + Vue3 + ts + vue-router + pinia + element-plus + axios + less
+
+本项目基于Vite + Vue3 + ts + vue-router + pinia + element-plus + axios + less创建
+
+
+
+运行方式
+
+```text
+cd my-project
+npm i
+npm run dev
+```
+
+
+
+需要修改的地方
+
+```text
+utils/request.ts
+router/index.ts
+```
+
+
+
+可以修改的地方
+
+```text
+vite.config.ts
+```
+
+该文件中的`server.proxy`,`server.host`,`server.port`可以进行更改,其他地方不建议更改

package/template/base-ts/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>vue-template-ts</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>

package/template/base-ts/package.json.tpl

@@ -0,0 +1,27 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "less": "^4.5.1",
+    "tslib": "^2.8.1",
+    "vue": "^3.5.24"__OPTIONAL_DEP__
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.4",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vue-tsc": "^3.1.4"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}

package/template/base-ts/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template/base-ts/src/App.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="welcome-container">
+    <div class="welcome-card">
+      <h1 class="welcome-title">欢迎来到我的项目！</h1>
+      <p class="welcome-desc">
+        这是一个 Vue 3 + TS 版基础项目的欢迎页面示例。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+
+</script>
+
+<style scoped>
+/* 外层容器，全屏居中 */
+.welcome-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #4facfe, #00f2fe);
+}
+
+/* 卡片样式 */
+.welcome-card {
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 40px;
+  border-radius: 16px;
+  text-align: center;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  animation: fadeIn 1s ease;
+}
+
+/* 标题 */
+.welcome-title {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+/* 描述 */
+.welcome-desc {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+  color: #555;
+}
+
+/* 标题淡入动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

package/template/base-ts/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/template/base-ts/src/main.ts.tpl

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+/* __ELEMENT_IMPORT__ */
+/* __ROUTER_IMPORT__ */
+/* __PINIA_IMPORT__ */
+/* __VANT_IMPORT__ */
+
+const app = createApp(App)
+
+/* __ELEMENT_USE__ */
+/* __ROUTER_USE__ */
+/* __PINIA_USE__ */
+/* __VANT_USE__ */
+
+app.mount('#app')

package/template/base-ts/src/style.css

@@ -0,0 +1,39 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.el-header,
+.el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
+
+.el-aside {
+  background-color: #D3DCE6;
+  color: #333;
+  text-align: center;
+  line-height: 200px;
+}
+
+.el-main {
+  background-color: #E9EEF3;
+  color: #333;
+  text-align: center;
+  line-height: 160px;
+}
+
+body>.el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}

package/template/base-ts/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue'
+	const vueComponent: DefineComponent<{}, {}, any>
+	export default vueComponent
+}

package/template/base-ts/tsconfig.app.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/template/base-ts/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "module": "esnext",
+    "target": "esnext",
+    "moduleResolution": "node",
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx",
+    "typings",
+    "src/.env"
+  ]
+}

package/template/base-ts/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/base-ts/vite.config.ts

@@ -0,0 +1,25 @@
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import { defineConfig } from 'vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [vue()],
+	resolve: {
+		alias: {
+			'@': path.resolve(__dirname, './src')
+		}
+	},
+	server: {
+		host: '0.0.0.0',
+		port: 20000,
+		strictPort: false,
+		proxy: {
+			'/api': {
+				target: 'http://localhost:8080',
+				changeOrigin: true,
+				rewrite: (path) => path.replace(/^\/api/, '')
+			}
+		}
+	}
+})

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

@@ -0,0 +1,13 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/views/Home.vue')
+  }
+]
+
+export default createRouter({
+  history: createWebHistory(),
+  routes
+})

package/template/router-js/src/views/Home.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="welcome-container">
+    <div class="welcome-card">
+      <h1 class="welcome-title">欢迎来到我的项目！</h1>
+      <p class="welcome-desc">
+        这是一个 Vue 3 + JS 版基础项目的欢迎页面示例。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+
+</script>
+
+<style scoped>
+/* 外层容器，全屏居中 */
+.welcome-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #4facfe, #00f2fe);
+}
+
+/* 卡片样式 */
+.welcome-card {
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 40px;
+  border-radius: 16px;
+  text-align: center;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  animation: fadeIn 1s ease;
+}
+
+/* 标题 */
+.welcome-title {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+/* 描述 */
+.welcome-desc {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+  color: #555;
+}
+
+/* 标题淡入动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

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

@@ -0,0 +1,13 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/views/Home.vue')
+  }
+]
+
+export default createRouter({
+  history: createWebHistory(),
+  routes
+})

package/template/router-ts/src/views/Home.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="welcome-container">
+    <div class="welcome-card">
+      <h1 class="welcome-title">欢迎来到我的项目！</h1>
+      <p class="welcome-desc">
+        这是一个 Vue 3 + TS 版基础项目的欢迎页面示例。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+
+</script>
+
+<style scoped>
+/* 外层容器，全屏居中 */
+.welcome-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #4facfe, #00f2fe);
+}
+
+/* 卡片样式 */
+.welcome-card {
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 40px;
+  border-radius: 16px;
+  text-align: center;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  animation: fadeIn 1s ease;
+}
+
+/* 标题 */
+.welcome-title {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+/* 描述 */
+.welcome-desc {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+  color: #555;
+}
+
+/* 标题淡入动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>