# vue2-vant

**Repository Path**: long-gitos/vue2-vant

## Basic Information

- **Project Name**: vue2-vant
- **Description**: a h5 template for vue2
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/long-gitos/vue2-vant-template
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-08-30
- **Last Updated**: 2022-02-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Vant, H5, Tailwind, h5-template

## README

# vue2-vant
## 安装依赖

- NodeJS v14.0+
- Npm v6.0+
- Yarn v1.0+
- Vue-cli v4.5.13+
- Vue v2.6.14
- Vant v2.12.38

推荐使用 [yarn 包管理工具](https://yarnpkg.com/)，并使用淘宝镜像安装依赖

```bash
// 1. 安装 yarn
npm install -g yarn
// 2. 更换 yarn 的镜像地址
yarn config get registry https://registry.npm.taobao.org
// 3. 安装项目依赖
yarn install
// 或直接使用 npm 安装项目依赖
npm install
```

## 打包命令

```bash
# 本地开发 dev 环境 端口号 1234， 可在项目根目录 settings.js  文件修改
npm run dev
# tes 环境
npm run build:test
# 生产环境
npm run build:prod
# 启动本地静态服务查看前端的 dist 目录文件
npm run preview
# 依赖包分析
npm run build:report
# prettier 格式化 src 目录
npm run format
# eslint 校验并修复 src 目录
npm run lint:fix
# stylelint 校验 src 目录
npm run lint:css
```
## 功能集成

- [x] Vue-Router 集成
- [x] Vuex 集成
- [x] Axios 接口封装
- [x] 集成 Mock 功能
- [x] 全局组件
  - [x] svg icon
- [x] Vue config 和 Webpack 配置
  - [x] 基础配置
  - [x] 多环境配置
  - [x] Proxy 跨域
  - [x] 打包分析
  - [x] 别名 Alias
  - [x] SplitChunks 拆包
  - [x] Gzip
  - [x] 默认 style 标签，variable 和 mixins 导入
  - [x] vue 文件引入 less 变量
  - [x] cdn 集成
- [ ] I18n 方案集成
- [x] 移动端集成
  - [x] vw 移动端适配
  - [x] Vant 按需加载
  - [x] Vant 主题自定义
- [x] 编码集成
  - [x] 新增 [tailwindcss](https://tailwindcss.com/) 敏捷开发样式；
  - [x] 编码规范：editorconfig + eslint + prettier + airbnb guide；
  - [x] CSS 规范：Stylelint + Standard + Prettier + Order；
  - [x] Git Hook： （Lint-staged + Husky）；
  - [x] 提交规范： （Commitizen + Commitlint）；
  - [x] Visual Studio Code：（插件 + 编辑器设置）；

## 问题

#### 1. git: 'cz' is not a git command. See 'git --help'.

请全局安装 `commitizen`后，重新执行 `git cz` 命令

```bash
npm -g install commitizen
```

#### 2. 生产环境或开发环境单独引入 mock 数据？

**生产环境单独引入 mock 数据**

请将 main.js 代码替换如下：

```js
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock');
  mockXHR();
}
```
修改 vue.config.js 行代码替换如下：

```js
devServer: {
  ...
  before() {
    // if (process.env.NODE_ENV === 'development') {
      // require('./mock/mock-server.js');
    // }
  }
}
```

**开发环境单独引入 mock 数据**

```js
// 请将 main.js 行代码替换如下：
if (process.env.NODE_ENV === 'development') {
  const { mockXHR } = require('../mock');
  mockXHR();
}
```
修改 vue.config.js 行代码替换如下：
```js
// 替换前
devServer: {
  ...
  before() {
    // if (process.env.NODE_ENV === 'development') {
      require('./mock/mock-server.js');
    // }
  }
},
// 替换后
devServer: {
  ...
  before() {
    if (process.env.NODE_ENV === 'development') {
      require('./mock/mock-server.js');
    }
  }
},
```