Vue SPA 模板
基于 Vue 3 + Vite + TypeScript 的现代化单页应用程序模板，开箱即用，让你告别繁琐的配置，专注业务逻辑的开发。
技术栈
- Vue 3 - 渐进式 JavaScript 框架，使用 Composition API
- TypeScript - JavaScript 的超集，提供完整的类型安全
- Vite - 下一代前端构建工具，极速的开发体验
- Vue Router - Vue.js 官方路由管理器
- Pinia - Vue 3 官方状态管理库
- Vue i18n - Vue.js 国际化插件
- Tailwind CSS - 实用优先的 CSS 框架
- SCSS - CSS 预处理器，增强样式编写能力
快速开始
创建项目
bash
# 初始化项目
vup init my-project
# 进入项目目录
cd my-project
# 添加 Vue 应用
vup add my-vue-app
# 选择 Vue SPA 模板开发
bash
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev开发服务器将在 http://localhost:9301 启动
构建
bash
# 构建生产版本
pnpm build构建文件将输出到 .output 目录
项目结构
my-vue-app/
├── public/ # 静态资源
│ └── favicon.ico
├── src/
│ ├── assets/ # 资源文件
│ │ └── images/
│ │ └── vue.svg
│ ├── locales/ # 国际化文件
│ │ ├── en_US.ts # 英文翻译
│ │ ├── zh_CN.ts # 中文翻译
│ │ └── index.ts # i18n 配置
│ ├── router/ # 路由配置
│ │ ├── index.ts # 路由实例
│ │ └── routes.ts # 路由定义
│ ├── views/ # 页面组件
│ │ ├── demo/ # 示例页面
│ │ │ ├── Demo.vue
│ │ │ └── stores/
│ │ │ └── demo.ts # 示例状态管理
│ │ ├── docs/ # 文档页面
│ │ │ └── Docs.vue
│ │ ├── empty/ # 空状态页面
│ │ │ └── Empty.vue
│ │ └── index/ # 首页
│ │ └── Index.vue
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
│ └── vue-shim.d.ts # Vue 类型声明
├── auto-imports.d.ts # 自动导入类型声明
├── index.html # HTML 模板
├── package.json # 项目配置
├── tsconfig.json # TypeScript 配置
└── vite.config.js # Vite 配置核心特性
🎯 TypeScript 支持
完整的 TypeScript 支持，提供类型安全和智能提示：
typescript
// 组件中使用 TypeScript
<script setup lang="ts">
interface User {
id: number;
name: string;
email: string;
}
const user = ref<User>({
id: 1,
name: 'John Doe',
email: 'john@example.com'
});
</script>🚀 Vite 构建
基于 Vite 的极速开发体验：
- 热模块替换 (HMR) - 修改代码后立即看到效果
- 快速冷启动 - 几秒钟内启动开发服务器
- 优化的构建 - 生产构建优化，支持代码分割
- 自动导入 - 无需手动导入 Vue API
🎨 样式系统
使用 Tailwind CSS + SCSS 的组合方案：
vue
<template>
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-gray-900 mb-4">
{{ $t('welcome.title') }}
</h1>
<p class="text-gray-600">
{{ $t('welcome.description') }}
</p>
</div>
</template>
<style scoped lang="scss">
.container {
@apply bg-white rounded-lg shadow-md;
h1 {
@apply text-blue-600;
}
}
</style>🌍 国际化支持
内置中英文国际化支持：
typescript
// locales/zh_CN.ts
export default {
welcome: {
title: '欢迎使用 Vue 3',
description: '这是一个基于 Vue 3 + TypeScript + Vite 的现代化应用'
}
};
// 组件中使用
<template>
<h1>{{ $t('welcome.title') }}</h1>
<p>{{ $t('welcome.description') }}</p>
</template>🏪 状态管理
使用 Pinia 进行状态管理：
typescript
// stores/demo.ts
import { defineStore } from 'pinia';
export const useDemoStore = defineStore('demo', () => {
const count = ref(0);
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
return {
count,
increment,
decrement,
};
});🛣️ 路由管理
基于 Vue Router 的路由系统：
typescript
// router/routes.ts
export default [
{
path: '/',
name: 'Home',
component: () => import('@/views/index/Index.vue'),
},
{
path: '/demo',
name: 'Demo',
component: () => import('@/views/demo/Demo.vue'),
},
];开发工具
代码质量
- ESLint - 代码质量检查
- Prettier - 代码格式化
- TypeScript - 类型检查
开发命令
bash
# 开发服务器
pnpm dev
# 构建项目
pnpm build
# 代码检查
pnpm lint
pnpm lint:fix
# 代码格式化
pnpm format
pnpm format:check自动导入
项目配置了自动导入，无需手动导入常用 API：
vue
<template>
<div>
<h1>{{ title }}</h1>
<button @click="handleClick">点击我</button>
</div>
</template>
<script setup lang="ts">
// 无需导入 ref, computed, onMounted 等
const title = ref('Hello Vue 3');
const count = computed(() => title.value.length);
const handleClick = () => {
console.log('Button clicked!');
};
onMounted(() => {
console.log('Component mounted');
});
</script>最佳实践
组件开发
- 使用 Composition API
- 优先使用
<script setup>语法 - 合理使用 TypeScript 类型定义
- 遵循 Vue 3 风格指南
样式开发
- 优先使用 Tailwind CSS 类
- 复杂样式使用 SCSS
- 保持组件样式的作用域
- 使用 CSS 变量进行主题定制
状态管理
- 使用 Pinia 进行状态管理
- 合理拆分 store
- 使用 TypeScript 定义 store 类型
- 避免在组件中直接修改状态
部署
构建优化
- 代码分割和懒加载
- 资源压缩和优化
- 静态资源 CDN 配置
- 环境变量配置
部署到 Vercel
Vue SPA 应用可以轻松部署到 Vercel。详细的部署配置和步骤请参考 Vercel 部署指南。