@zhengke0110/template-vue-ts

Vue 3 + TypeScript + Vite 项目模板，集成了常用的开发库和工具。

📦 已集成的库

核心库

• ⚡️ Vite 7.1 - 下一代前端构建工具
• 💚 Vue 3.5 - 渐进式 JavaScript 框架
• 🎨 TypeScript 5.9 - JavaScript 的超集，提供类型安全

路由管理

• �️ Vue Router 4 - Vue.js 官方路由管理器

状态管理

• 📦 Pinia 2 - Vue 官方推荐的状态管理库

HTTP 请求

• 🌐 Axios 1.7 - 基于 Promise 的 HTTP 客户端

工具库

• 🎯 VueUse - Vue 组合式 API 工具集

使用方式

通过 zhengke-cli 创建项目

npx @zhengke0110/cli init --name my-app --template vue-ts

手动使用

# 克隆模板
npx degit zhengke0110/template-vue-ts my-app

# 进入项目目录
cd my-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

📁 项目结构

.
├── src/
│   ├── api/              # API 接口
│   │   ├── index.ts      # Axios 实例配置
│   │   └── user.ts       # 用户相关接口
│   ├── router/           # 路由配置
│   │   └── index.ts      # 路由定义
│   ├── stores/           # Pinia 状态管理
│   │   ├── index.ts      # Pinia 实例
│   │   └── counter.ts    # 计数器示例 store
│   ├── views/            # 页面组件
│   │   ├── Home.vue      # 首页（Pinia 示例）
│   │   └── About.vue     # 关于页（VueUse 示例）
│   ├── App.vue           # 根组件
│   ├── main.ts           # 应用入口
│   └── vite-env.d.ts     # 环境变量类型声明
├── public/               # 公共静态文件
├── .env.development      # 开发环境变量
├── .env.production       # 生产环境变量
├── index.html            # HTML 模板
├── vite.config.ts        # Vite 配置
└── tsconfig.json         # TypeScript 配置

可用脚本

• npm run dev - 启动开发服务器
• npm run build - 构建生产版本
• npm run preview - 预览生产构建

📝 使用说明

Vue Router

路由配置在 src/router/index.ts 中，已配置两个示例路由：

• / - 首页
• /about - 关于页

Pinia

状态管理示例在 src/stores/counter.ts，使用组合式 API 风格：

import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()
counterStore.increment()

Axios

HTTP 请求已配置好拦截器，支持：

• 自动添加 token
• 统一错误处理
• 请求/响应拦截

使用示例：

import { getUserInfo } from '@/api/user'

const data = await getUserInfo()

VueUse

提供了丰富的组合式函数，示例见 About.vue：

import { useMouse, useWindowSize, useOnline } from '@vueuse/core'

const { x, y } = useMouse()
const { width, height } = useWindowSize()
const isOnline = useOnline()

⚙️ 环境变量

项目支持多环境配置：

• .env.development - 开发环境
• .env.production - 生产环境

环境变量示例：

VITE_API_BASE_URL=http://localhost:3000/api

🔧 配置说明

路径别名

已配置 @ 指向 src 目录：

import { useCounterStore } from '@/stores/counter'

开发服务器

• 端口：3000
• 自动打开浏览器
• API 代理已配置（/api -> http://localhost:8080）

技术栈

• Vue 3
• TypeScript
• Vite
• Vue Router
• Pinia
• Axios
• VueUse

License

MIT