# vue-cli3-demo

**Repository Path**: huangkai5/vue-cli3-demo

## Basic Information

- **Project Name**: vue-cli3-demo
- **Description**: 基于vue-cli3搭建的移动端项目，其中包括开发环境，预上线环境，测试环境，rem转换，axios请求封装等模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-01-21
- **Last Updated**: 2021-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Vuex, 模板

## README


# vue2中的vue-cli3模板（适用于移动端）
# 声明



```bash
#一般我们正式开发项目，会区别多个代码环境，直接打包上线必然会出现难以挽回的bug，而且生产环境和开发环境接口，数据都是不同的，介于此我们一般划分3个环境。
development # 开发
prerelease  # 预发布/测试（一般会配置一个和正式环境一模一样的线上测试）
production  # 生产环境
```
# 文件结构说明

<pre>
.
├── README.md                   // 说明
├── release                     // 项目release目录（即预发布文件）
├── publish                     // 项目publish目录（正式线上环境文件）
├── public                      // 静态资源目录
│   ├── favicon.ico             // 浏览器图标文件
│   └── index.html              // 项目入口模板文件
├── package.json                // 项目配置文件
├── src                         // 生产目录
│   ├── assets                  // css js 和图片资源
│   ├── api                     // 接口服务
│   ├── components              // 各种组件
│   ├── views                   // 各种页面
│   ├── common                  // 公共的方法
│   ├── utils                   // 业务需要的工具函数，自行扩展
│   ├── style                   // 全局样式和scss使用的mixin文件
│   ├── store                   // vuex配置目录
│   │   ├── index.js            // 配置入口
│   │   ├── state.js            // 状态维护文件即Vuex的所有数据源对照组件中data方法理解
│   │   ├── actions.js          // 方法维护文件对照组件中methods理解
│   │   ├── getters.js          // state派生状态对照组件中computed理解
│   │   ├── mutaitions.js       // 状态修改提交方法，该方法是同步方法
│   │   └── mutaition-types.js  // 提交修改抽离常量文件
│   ├── router.js               // 路由配置
│   └── App.vue                 // 根组件
│   └── main.js                 // Webpack 预编译入口
├── .browserslistrc             // 浏览器兼容配置
├── .env.development            // 本地开发环境需要的配置 （接口地址写这里面也可以）
├── .env.prerelease             // 测试环境/预发布环境需要的配置 （接口地址写这里面也可以）
├── .env.production             // 正式环境需要的配置 （接口地址写这里面也可以）
├── .eslintrc.js                // eslint配置
├── .gitignore                  // git仓库需要忽略的文件配置
├── .babel.config.js            // babel 配置
├── package.json                // 项目管理配置文档说明
├── vue.config.js               // vue-cli构建项目详细配置文件代替老版build文件夹
.
</pre>

## 开发步骤 （以下开发步骤可以全部使用 `npm` ）
## 下载依赖
```
npm install
```

### 启动项目
```
npm run serve
```

### 打包测试环境或者预发布
```
npm run build
```

### 打包正式环境
```
npm run publish
```

### 代码修复 最后终端运行npm run serve就不会报ESLint错误了
```
npm run lint
```

### 自定义 `vue.config` 文件参数
See [Configuration Reference](https://cli.vuejs.org/config/).