63 lines
1.8 KiB
Markdown
63 lines
1.8 KiB
Markdown
# 🎬 Vue-Test — 猫眼电影练习项目
|
||
|
||
本项目是一个基于 **Vue 3 + Vite** 构建的前端练习项目，以猫眼电影网站为原型，用于练习 Vue 组件化开发、路由管理与接口数据展示等核心功能。
|
||
|
||
---
|
||
|
||
## 🧩 项目简介
|
||
|
||
本项目模拟猫眼电影网站的部分功能模块，包括：
|
||
- 电影列表与详情展示
|
||
- 城市选择与影院信息
|
||
- 用户登录与评分功能（可选）
|
||
|
||
适合初学者熟悉 Vue 3 的基础语法、组件通信、Pinia 状态管理以及 Vite 构建流程。
|
||
|
||
---
|
||
|
||
## 💻 开发环境推荐
|
||
|
||
### IDE
|
||
- [VS Code](https://code.visualstudio.com/)
|
||
- 插件推荐：
|
||
- [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar)（请禁用 Vetur）
|
||
|
||
### 浏览器
|
||
- **推荐使用 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
|
||
```
|
||
|
||
### 2️⃣ 启动开发服务器
|
||
```bash
|
||
npm run dev
|
||
```
|
||
启动后，终端会显示本地开发地址（通常为 `http://localhost:5173/`）。
|
||
可在浏览器中打开查看实时预览效果。
|
||
|
||
### 3️⃣ 构建生产版本
|
||
```bash
|
||
npm run build
|
||
```
|
||
打包后的文件将生成在 `dist/` 目录，可用于部署到任意静态服务器。
|
||
|
||
---
|
||
|
||
## 🧠 更多配置
|
||
|
||
详见 [Vite 官方配置文档](https://vite.dev/config/) 以了解更多自定义选项。
|
||
|
||
---
|
||
✨ **Enjoy coding with Vue 3 & Vite!**
|