# web-tech

**Repository Path**: ukiot/web-tech

## Basic Information

- **Project Name**: web-tech
- **Description**: 现代Web开发全栈教程

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-04
- **Last Updated**: 2025-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 现代Web开发全栈教程

## 📚 教程概述

本教程提供了使用现代技术栈进行全栈Web开发的完整指南，包括Vue.js前端、NestJS后端、以及相关的构建工具和开发环境配置。

## 🛠️ 技术栈

### 前端技术
- **Vue.js 3** - 渐进式JavaScript框架
- **TypeScript** - 类型安全的JavaScript超集
- **Vite** - 快速的前端构建工具
- **Vue Router** - 官方路由管理器
- **Pinia** - Vue.js状态管理库

### 后端技术  
- **Node.js** - JavaScript运行时环境
- **NestJS** - 基于Node.js的企业级框架
- **TypeScript** - 后端类型安全开发
- **TypeORM** - 数据库ORM框架
- **JWT** - 身份验证解决方案

## 📖 教程目录

### 基础教程
- [Vue.js 教程](./docs/vue-tutorial.md) - Vue3组件开发详解
- [Node.js 教程](./docs/nodejs-tutorial.md) - Node.js基础和高级特性
- [NestJS 教程](./docs/nestjs-tutorial.md) - 企业级后端开发框架
- [Vite 教程](./docs/vite-tutorial.md) - 现代前端构建工具
- [TypeScript 教程](./docs/typescript-tutorial.md) - 类型安全开发实践

### 项目实战
- [前端工程搭建](./docs/frontend-setup.md) - Vue + Vite + TypeScript完整配置
- [后端工程搭建](./docs/backend-setup.md) - NestJS + TypeScript完整配置
- [项目架构设计](./docs/project-structure.md) - 企业级项目结构最佳实践
- [开发环境配置](./docs/dev-environment.md) - 开发工具和环境设置

## 🚀 快速开始

### 前提条件
- Node.js (v18+)
- npm 或 yarn
- Git
- VSCode (推荐)

### 创建前端项目
```bash
# 使用Vite创建Vue项目
npm create vue@latest frontend-app
cd frontend-app
npm install
npm run dev
```

### 创建后端项目
```bash
# 使用NestJS CLI创建项目
npm i -g @nestjs/cli
nest new backend-app
cd backend-app
npm run start:dev
```

## 📁 完整项目结构
```
project/
├── frontend/                 # Vue前端应用
│   ├── src/
│   │   ├── components/      # 组件
│   │   ├── views/          # 页面视图
│   │   ├── stores/         # 状态管理
│   │   ├── router/         # 路由配置
│   │   └── utils/          # 工具函数
│   ├── public/             # 静态资源
│   └── package.json
├── backend/                  # NestJS后端应用
│   ├── src/
│   │   ├── modules/        # 功能模块
│   │   ├── common/         # 公共模块
│   │   ├── guards/         # 守卫
│   │   └── decorators/     # 装饰器
│   └── package.json
├── shared/                   # 共享类型定义
└── docs/                    # 项目文档
```

## 💡 学习路径

### 初学者
1. [Node.js基础](./docs/nodejs-tutorial.md)
2. [TypeScript入门](./docs/typescript-tutorial.md)
3. [Vue.js基础](./docs/vue-tutorial.md)
4. [前端项目搭建](./docs/frontend-setup.md)

### 进阶开发者
1. [NestJS框架深入](./docs/nestjs-tutorial.md)
2. [Vite构建优化](./docs/vite-tutorial.md)
3. [后端项目搭建](./docs/backend-setup.md)
4. [项目架构设计](./docs/project-structure.md)

## 🔗 相关资源

- [Vue.js 官方文档](https://vuejs.org/)
- [NestJS 官方文档](https://nestjs.com/)
- [TypeScript 官方文档](https://www.typescriptlang.org/)
- [Vite 官方文档](https://vitejs.dev/)
- [Node.js 官方文档](https://nodejs.org/)

## 📝 贡献指南

欢迎提交Issue和Pull Request来完善这个教程！

## 📄 许可证

MIT License

---

*本教程持续更新中，如有问题请提交Issue。*