# w-trip

**Repository Path**: wlz-00/w-trip

## Basic Information

- **Project Name**: w-trip
- **Description**: 舒馨旅途 vue3 项目
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: https://w-trip.vercel.app/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-02
- **Last Updated**: 2023-02-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 舒馨旅途
基于Vue3、Vite、Pinia、Vant 3搭建完成的旅途网站移动端
The mobile end of the travel website is built based on Vue3, Vite, Pinia and Vant 3

预览地址：https://w-trip.vercel.app/（需要翻墙）
## 特性

- Vue3：采用 Vue3 + script setup 最新的 Vue3 组合式 API
- Vant：Vant 的 Vue3 版本
- Pinia: 传说中的 Vuex5
- Vite：真的很快
- Vue Router：路由路由
- less：预处理器
- CSS 变量：主要控制项目的布局和颜色
- Axios：发送网络请求（已封装好）
- postcss：css px自动转成viewport
- hooks：抽取公用hook

## 页面展示
以下为舒馨旅途 Vue3 版本的页面预览：
- 首页
<div align=center>
    <img src="./src/assets/img/result/home1.png"/>
</div>

<div align=center>
    <img src="./src/assets/img/result/home2.png"/>
</div>

- 选择地区
<div align=center>
    <img src="./src/assets/img/result/city.png"/>
</div>

- 搜索
<div align=center>
    <img src="./src/assets/img/result/search1.png"/>
</div>

<div align=center>
    <img src="./src/assets/img/result/search2.png"/>
</div>

- 收藏
<div align=center>
    <img src="./src/assets/img/result/favor.png"/>
</div>

- 订单
<div align=center>
    <img src="./src/assets/img/result/order.png"/>
</div>

- 消息
<div align=center>
    <img src="./src/assets/img/result/message.png"/>
</div>


## 项目启动

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Compile and Minify for Production

```sh
npm run build
```