diff --git a/README.md b/README.md index aac3362..b833aab 100644 --- a/README.md +++ b/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!**