# vue-vant

**Repository Path**: d7c/vue-vant

## Basic Information

- **Project Name**: vue-vant
- **Description**: Vue 和 vant 搭建的移动 Wap 网站。
- **Primary Language**: NodeJS
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: http://www.d7c.top/
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2023-01-04
- **Last Updated**: 2023-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-vant

## 介绍

Vue 和 vant 搭建的移动 Wap 网站。

## 软件架构

### 构建用户界面的渐进式 JavaScript 框架 vuejs

vue3 中文官网地址：[https://v3.cn.vuejs.org/](https://v3.cn.vuejs.org/)，vuejs GitHub 地址：[https://github.com/vuejs/core](https://github.com/vuejs/core)，vue 官方扩展工具地址：[https://github.com/vuejs](https://github.com/vuejs)，vue 官方论坛地址：[https://forum.vuejs.org/](https://forum.vuejs.org/)，[开发文档](https://v3.cn.vuejs.org/guide/introduction.html)。

### 轻量、可靠的移动端 Vue 组件库 vant

vant GitHub 地址：[https://github.com/youzan/vant](https://github.com/youzan/vant)，vant GitHub 文档地址：[https://vant-ui.github.io/vant/#/zh-CN/](https://vant-ui.github.io/vant/#/zh-CN/)。

vant gitee 地址：[https://gitee.com/vant-contrib/vant/](https://gitee.com/vant-contrib/vant/)，vant gitee 文档地址：[https://vant-contrib.gitee.io/vant/#/zh-CN](https://vant-contrib.gitee.io/vant/#/zh-CN)。

vant 图标库：[vant 图标库](https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=31945)。

### 解决移动端各种滚动场景需求插件 better-scroll

better-scroll GitHub 地址：[https://github.com/ustbhuangyi/better-scroll](https://github.com/ustbhuangyi/better-scroll)，better-scroll 文档地址：[https://better-scroll.github.io/docs/zh-CN/](https://better-scroll.github.io/docs/zh-CN/)，better-scroll 显示地址：[https://better-scroll.github.io/examples/#/](https://better-scroll.github.io/examples/#/)。

## 安装教程

### 1. 安装开发依赖模块

```
1、vant 按需引入插件
npm install --save-dev unplugin-vue-components
```

### 2. 安装项目依赖模块

```
1、normalize.css CSS 重置库，https://www.npmjs.com/package/normalize.css
npm install --save normalize.css
2、vant
npm install --save vant
3、axios，https://www.axios-http.cn/
npm install --save axios
4、store-library
npm install --save git+https://gitee.com/d7c/store-library.git#localStorage.1.0.0
5、@vant/area-data 中国省市区数据，适用于 Vant Area 组件，https://www.npmjs.com/package/@vant/area-data
npm install --save @vant/area-data
6、@better-scroll/core
npm install --save @better-scroll/core @better-scroll/pull-up
```

## 使用说明

### Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Export the configuration
```
vue inspect --mode=development > webpack.dev.js
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

### vue-cli-service serve [options] [entry]
```
vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
选项：
--open    在服务器启动时打开浏览器
--copy    在服务器启动时将 URL 复制到剪切版
--mode    指定环境模式 (默认值：development)
--host    指定 host (默认值：0.0.0.0)
--port    指定 port (默认值：8080)
--https   使用 https (默认值：false)
命令行参数 [entry] 将被指定为唯一入口 (默认值：src/main.js，TypeScript 项目则为 src/main.ts)，而非额外的追加入口。
尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。
```

### vue-cli-service build [options] [entry|pattern]
```
vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。
它的 chunk manifest 会内联在 HTML 里。
选项：
--mode        指定环境模式 (默认值：production)
--dest        指定输出目录 (默认值：dist)
--modern      面向现代浏览器带自动回退地构建应用
--target      app | lib | wc | wc-async (默认值：app)
--name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
--no-clean    在构建项目之前不清除目标目录的内容
--report      生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch       监听文件变化
这里还有一些有用的命令参数：
--modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。
--target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。
--report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。
```

## 打包成 App 步骤

### 1、修改路由模式为 hash 默认，npm run build 编译项目

```
import { createRouter, createWebHashHistory } from 'vue-router';
const router = createRouter({
    history: createWebHashHistory(),
    routes
});
```

### 2、使用 HBuilder X 将 dist 目录作为项目打开

### 3、在 dist 目录下创建并编辑 manifest.json 配置文件

### 4、点击菜单栏发行菜单 → 原生APP-云打包（或原生APP-本地打包）打包当前项目为 apk

### 5、将编辑好的 manifest.json 配置文件放到 vue-vant 项目的 public 目录下，方便以后打包

## 运行展示

<img src="./docs/展示.png">
<img src="./docs/apk.png">

## 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

## 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

<style>p{text-indent:2em}</style>