# vite-vue3-h5

**Repository Path**: sunshinejlu/vite-vue3-h5

## Basic Information

- **Project Name**: vite-vue3-h5
- **Description**: 移动端 Vant3.x + Vue3.x + Vite2.x + Mockjs + Vue-Router4.x + Vuex4.x（Pinia） + REM(postcss-pxtorem) 布局的实例运用
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2024-05-27
- **Last Updated**: 2024-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 平台简介

- 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [Vant3](https://vant-contrib.gitee.io/vant/v3/#/zh-CN) + [Vite2](https://cn.vitejs.dev) 版本。

## 移动端布局方案

- 移动端 Vant3.x + Vue3.x + Vite2.x + Mockjs + Vue-Router4.x + Vuex4.x + REM(postcss-pxtorem) 布局布局的实例运用

## 首次使用项目，建议 npm run mock, 体验效果佳

## 配置文件说明

- vite.config.js
  vite 配置文件

- postcss.config.js
  postcss 配置文件

## 分支介绍

### master 分支

1. 简单 demo 示例。

### dev 分支

1. 这里是列表文本通过 mock 数据，实现了首页，某东分类，某多分类，购物车（部分功能），我的(可进入江苏旅游舒适度页面<该网站已关闭>）

### simple 分支

1. 基础框架

### simple-pinia分支

1. 基础框架：
主要动作：移除vuex 使用pinia进行数据存储。


## 前端运行

```bash
# 克隆项目
# git clone https://gitee.com/jifengf/vite-vue3-h5.git

# 进入项目目录
cd vite-vue3-h5

# 安装依赖
npm install

# 启动服务
npm run dev
# 启动mock开发环境 npm run mock
# 启动非mock开发环境 npm run dev

# 构建测试环境 npm run build:stage
# 构建生产环境 npm run build:prod
# 构建mock生产环境 npm run build:mock
# 前端访问地址 http://localhost:8000
```

## 登录信息

- admin/admin123

## 示例 DEMO

![输入图片说明](src/assets/aa71c12e1c110227e4f4d49d15dd2837.gif)