52 lines
1.8 KiB
Markdown
52 lines
1.8 KiB
Markdown
# Vue 3 + Vite 项目模板
|
|
|
|
这是一个基于 Vue 3 和 Vite 的项目模板，旨在帮助开发者快速搭建和开发现代前端应用。
|
|
|
|
## 技术栈
|
|
|
|
- **Vue 3**: 使用 Vue 3 的组合式 API 和 `<script setup>` 语法。
|
|
- **Vite**: 快速构建工具，支持热更新和快速开发。
|
|
- **TypeScript**: 可选支持，为项目提供类型检查和更好的开发体验。
|
|
- **CSS**: 使用原生 CSS 或预处理器（如 SCSS）进行样式管理。
|
|
|
|
## 目录结构
|
|
- vue-demo
|
|
- index.html # 主入口 HTML 文件
|
|
- package.json # 项目依赖和脚本配置
|
|
- public # 静态资源目录
|
|
- src # 源代码目录
|
|
- assets # 静态资源目录
|
|
- App.vue # 根组件
|
|
- main.js # 应用入口文件
|
|
- style.css # 全局样式文件
|
|
- components # 组件目录
|
|
- vite.config.js # Vite 配置文件
|
|
- yarn.lock # Yarn 包管理器锁文件
|
|
|
|
## 功能介绍
|
|
|
|
- **组件化开发**: 使用 Vue 3 的单文件组件 (SFC) 进行模块化开发。
|
|
- **热更新**: Vite 提供了快速的热更新功能，开发过程中无需手动刷新页面。
|
|
- **TypeScript 支持**: 可选支持 TypeScript，提升代码质量和开发效率。
|
|
- **样式管理**: 支持原生 CSS 和预处理器（如 SCSS），方便管理样式。
|
|
|
|
## API 接口说明
|
|
|
|
本项目目前未包含后端 API，但可以通过以下方式集成后端服务：
|
|
|
|
1. 使用 Axios 或 Fetch 进行 HTTP 请求。
|
|
2. 配置 Vite 的代理功能，解决跨域问题。
|
|
|
|
## 注意事项
|
|
|
|
- 请确保已安装 Node.js 和 Yarn。
|
|
- 如果需要 TypeScript 支持，请在创建项目时选择相关选项。
|
|
- 生产构建时，请确保已正确配置环境变量。
|
|
|
|
|
|
## 学习资源
|
|
|
|
- [Vue 3 官方文档](https://v3.vuejs.org/)
|
|
- [Vite 官方文档](https://vitejs.dev/)
|
|
- [TypeScript 官方文档](https://www.typescriptlang.org/)
|