# vue-generator

**Repository Path**: huarxia/vue-generator

## Basic Information

- **Project Name**: vue-generator
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-06-18
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

# vue-generator

------

### ![](https://img.shields.io/badge/vue--cli--template-1.0.0-green.svg) ![](https://img.shields.io/badge/vue-2.5.17-green.svg) ![](https://img.shields.io/badge/iview-3.0.1-green.svg) 

### 开始

```shell
# 安装依赖包
$ npm install
```

```shell
# 本地开发
$ npm run serve
```

```shell
# build
$ npm run build
```

> 其他暂时未用到： `npm run lint` `npm run test:unit`

### 使用 [commitizen](https://github.com/commitizen/cz-cli) 规范提交代码: [参考连接](http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html)

```shell
# 使用npm 全局安装
$ (sudo) npm install -g commitizen
```

在项目中使用 angular 的 commit 规范

```shell
# 此步已做不用再次操作
$ commitizen init cz-conventional-changelog --save-dev --save-exact
```

然后我们就可以愉快的使用 git cz 代替 git commit 命令了。当然我们也可也将其加到npm script 中

```shell
"script": {
    "ci": "git cz"
}
```

```
feat：新功能（feature）
fix：修补bug
docs：文档（documentation）
style： 格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
test：增加测试
chore：构建过程或辅助工具的变动
```

###  [pre-commit](https://github.com/observing/pre-commit)

> 提交代码时会执行 `npm run lint` 不符合 [prettier](https://github.com/prettier/prettier) 会自动格式化



### 关于代码规范

> 一般情况下在提交代码时候会检查代码规范和自动格式化代码，但是仅限于src文件夹下，对于其他文件貌似不行，故单独添加命令以满足条件

```json
{
    "format": "prettier --write \"config/**/*.{js,vue,json,less,scss,css}\" \"mock/**/*.{js,vue,json,less,scss,css}\" \"src/**/*.{js,vue,json,less,scss,css}\" \"*.{js,json}\""
}
```



```shell
# 当有不符合代码规范时候可以手动命令执行解决
$ npm run format
```

### 关于本地开发是本地mock数据

1. `src/libs/api.js` 添加接口 eg: `API.TEST = CONTEXT_PATH + '/test'`

2. `mock` 文件夹下添加新增文件 eg: `GET/api/test/index.js`  `GET` 代表请求的`method` 请求url是什么样子就在mock下建立什么样的文件夹 (参考列子见`GET/api/test/index.js`)

3. mock数据参照 `test`，使用的是 [mockjs](http://mockjs.com/)

   如有疑问请联系 liubiao@itoxs.com

### 关于本地开发

1. 本地mock

   ```shell
   $ npm run mock
   ```

这样启动命令就会让所有请求接口使用本地`mockjs` 进行开发，且必须事先写好mock逻辑

2. 本地开发代理其他地址接口

   > 需要配置的地方

   - `config/index.js` 

     ```js
     dev: {
         headers: {
             cookie: 'cookie_user_key=xxxx' // 登陆的用户名==
         },
         remote: {
             // 测试使用，正式代理请修改, 这里修改为代理的域
             path: 'http://qzone-music.qq.com'
         }
      }
     ```


   - 启动服务 `npm run remote`

3. 本地使用`https` (一旦本地开发使用`https` 将无法再热更新)

   > 本地也可以使用`https`了，使用方法见下方

   - `npm run serve`  ---> `npm run serve:https` : 常规启动
   - `npm run mock`  --->  `npm run mock:https` : 本地mock启动
   - `npm run remote`  ---> `npm run remote:https` : 远程mock启动