66
README.md
66
README.md
@@ -1,38 +1,62 @@
|
||||
# vue-test
|
||||
# 🎬 Vue-Test — 猫眼电影练习项目
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
本项目是一个基于 **Vue 3 + Vite** 构建的前端练习项目,以猫眼电影网站为原型,用于练习 Vue 组件化开发、路由管理与接口数据展示等核心功能。
|
||||
|
||||
## Recommended IDE Setup
|
||||
---
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
## 🧩 项目简介
|
||||
|
||||
## Recommended Browser Setup
|
||||
本项目模拟猫眼电影网站的部分功能模块,包括:
|
||||
- 电影列表与详情展示
|
||||
- 城市选择与影院信息
|
||||
- 用户登录与评分功能(可选)
|
||||
|
||||
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
|
||||
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
|
||||
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
|
||||
- Firefox:
|
||||
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
|
||||
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
|
||||
适合初学者熟悉 Vue 3 的基础语法、组件通信、Pinia 状态管理以及 Vite 构建流程。
|
||||
|
||||
## Customize configuration
|
||||
---
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
## 💻 开发环境推荐
|
||||
|
||||
## Project Setup
|
||||
### IDE
|
||||
- [VS Code](https://code.visualstudio.com/)
|
||||
- 插件推荐:
|
||||
- [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar)(请禁用 Vetur)
|
||||
|
||||
```sh
|
||||
### 浏览器
|
||||
- **推荐使用 Chromium 内核浏览器(Chrome / Edge / Brave 等)**
|
||||
- [Vue.js DevTools 插件](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
|
||||
- 启用 [Custom Object Formatter](http://bit.ly/object-formatters)
|
||||
- **Firefox 用户**
|
||||
- [Vue.js DevTools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
|
||||
- 启用 [Custom Object Formatter](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ 启动说明
|
||||
|
||||
### 1️⃣ 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
### 2️⃣ 启动开发服务器
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
启动后,终端会显示本地开发地址(通常为 `http://localhost:5173/`)。
|
||||
可在浏览器中打开查看实时预览效果。
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
### 3️⃣ 构建生产版本
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
打包后的文件将生成在 `dist/` 目录,可用于部署到任意静态服务器。
|
||||
|
||||
---
|
||||
|
||||
## 🧠 更多配置
|
||||
|
||||
详见 [Vite 官方配置文档](https://vite.dev/config/) 以了解更多自定义选项。
|
||||
|
||||
---
|
||||
✨ **Enjoy coding with Vue 3 & Vite!**
|
||||
|
||||
Reference in New Issue
Block a user