# vue2_exercise

**Repository Path**: onresize/vue2_exercise

## Basic Information

- **Project Name**: vue2_exercise
- **Description**: vue2脚手架demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-04-28
- **Last Updated**: 2025-06-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue2, webpack

## README

### 项目集成案例 🔨

- 使用 Vue2 + Elem + Antd-vue + webpack 开发，单文件组件
- 使用 Vuex，轻量、简单、易用，集成 Vuex 持久化插件
- 对 Axios 整个二次封装（请求拦截、取消、常用请求封装…）
- 支持i18n 国际化、SvgIcon组件封装
- 使用 VueRouter 进行路由权限拦截、页面按钮权限配置、路由懒加载
- 使用 KeepAlive 对页面进行缓存，支持多级嵌套页面缓存
- 常用自定义指令开发
- 集成微信扫码登录案例、flv/hls协议流播放(node后台接口链接)
- 区分包管理器、强制使用yarn包管理器
- 集成mock数据、简易配置切换真实接口
- Elem之上二次封装、全局编程式图片预览（mixins/provide/inject）、二次封装可拖拽dialog、extend封装全局loading
- 使用 husky、lint-staged、commitlint、git-cz、git-hooks 规范提交信息（提交预检测debugger、代码冲突、暂存区代码统一格式）

### 工程启动指南

```bash
yarn 
```

```bash
yarn dev
```

```js
 // node -v
 v14.18.2

 // npm -v
 6.14.17

 // yarn -v
 1.22.19
 
项目强制使用yarn安装依赖、请勿删除yarn.lock文件
 如果使用npm install安装卡住、换npm install --ignore-scripts

 node-sass依赖包不支持14版本以上的node版本运行
 pnpm 需要 16.x 版本 nodeJs
```

### 约定式提交规范
```js
git cz 
# ? Select the type of change that you're committing: docs:     Documentation only changes
# ? What is the scope of this change (e.g. component or file name): (press enter to skip) readme
# ? Write a short, imperative tense description of the change (max 86 chars):
# (46) update readme.md, add init project description
# ? Provide a longer description of the change: (press enter to skip) 

# ? Are there any breaking changes? No
# ? Does this change affect any open issues? No
# [main caae82e] docs(readme): update readme.md, add init project description
# 1 file changed, 7 insertions(+)
# zuo@zmac comitizen-practice-demo % 
```

如图，git cz 运行后，会有如下 6 个步骤

### 1.选择提交类型(必填)

Select the type of change that you're committing: (Use arrow keys)

类型 | 描述
--- | ---
feat |     A new feature 
fix |    A bug fix 
docs |    Documentation only changes 
style |    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) 
refactor | A code change that neither fixes a bug nor adds a feature 
perf |     A code change that improves performance 
test |    Adding missing tests or correcting existing tests 
build |    Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) 
ci |       Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) 
chore |    Other changes that don't modify src or test files 
revert |   Reverts a previous commit 

### 2.选择 scope 模块名(选填)
What is the scope of this change (e.g. component or file name): (press enter to skip) 

### 3.填写精炼的提交信息(必填)
Write a short, imperative tense description of the change (max 86 chars):

### 4.填写补充信息(选填)
Provide a longer description of the change: (press enter to skip) 

### 5.选择是否有破坏性更新(默认no)
Are there any breaking changes?

### 6.是否关联是 open 状态的 issue(默认no)
Does this change affect any open issues?

可以关闭 github issue，**但注意 commit 信息里面的末尾也要加 '(#issue编号)'**，这样在 github 体验更好


### standard-version（自动生成、打tag） 
[standard-version](https://github.com/conventional-changelog/standard-version) 安装后，只需要 npm run release，就可以有 npm run version 的功能，而且提交信息是标准的 commitizen 规范，而且自动生成 changelog 自动打 tag，自动 commit。你只需要 push 即可。

```js
git tag // 打tag
git push --tags // 提交tag
```