# boc-right-h5

**Repository Path**: DaBuChen/boc-right-h5

## Basic Information

- **Project Name**: boc-right-h5
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-12-10
- **Last Updated**: 2022-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# boc-right-h5

开发: npm run serve
构建: npm run build

# 技术栈

- vue3: 目前最新的 vue 版本
- vue-router: 路由
- less: CSS 预处理语言
- \*vuex: 目前没有安装，看后续是否需要
- vant: ui 组件库 [文档](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/home)
- axios：请求库

# 规范

## git 提交规范：使用约定式提交

```
// 常见提交类型
feat: 新功能
fix: 修补bug
docs: 文档的变更
style: 格式(不影响代码运行的变动)
refactor: 重构(即不是新增功能，也不是修改bug的代码变动)
perf: 用于性能改进的代码提交
test: 用于添加或修改现有测试
build: 修改影响到了系统的构建或外部依赖
ci: 修改CI配置文件或相关的脚本
revert: 用于撤销以前的commit
chore: 其他一些不影响源码或测试文件的代码变动
```

## 代码规范：

- 使用 eslint:recomanded + prettier
- 代码提交时会进行校验，如果校验不过，根据提交的错误信息进行修复。

## 结构规范：

```
src
    api: 后台接口文件夹
    pages: 页面文件夹
        页面：一个页面一个文件夹，使用index.vue作为页面输出文件。
            如果页面需要被拆分成组件，则在页面文件夹下新建components文件夹。
            下面放组件文件夹，组件同样使用index.vue作为输出文件。
    router: 路由文件夹
    utils: 工具函数文件夹
```

# 注意：

## 移动端适配

日常开发使用 px 作为单位，设计图指定设计稿宽度 375，然后按照设计图上素材的尺寸编写 css 即可。编译时会自动将源码的 px 转换成 rem，达到适配效果。

## Vant 组件使用

为了减少最终包的大小，组件的引用使用了按需引入。如果你要使用项目中还未使用过的 Vant 组件，正确的步骤是在 main.js 中先导入，再在页面中使用。

## 区分包环境

安装 npm 包时，注意区分是打包时使用的库，还是生产时使用的库。

## 图片压缩

图片素材可以上传到https://tinypng.com/进行压缩，更有利于浏览器快速加载

```
// 在运行时用的包
npm i vant@3
// 在编译阶段用的包
npm i eslint -D
```

# 搭建纪录

1. 使用 vue-cli 创建 vue3 项目
   eslint 默认是 recommended
2. 安装 vue-router 及配置
   查看官方文档 提示 npm install vue-router@4
3. 安装 less 和 less-loader
   样式支持 less 语法
4. 安装 amfe-flexible、postcss-pxtorem 及配置
   支持适配
5. 安装 normalize
   抹平浏览器间样式差异
6. 安装 prettier

```
为了格式化html,js,css
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
```

tip: 如果使用 vscode 编辑器 记得安装 vscode 的 eslint,prettier 的插件，这样在 ctrl+s 保存代码的时候自动格式化代码

7. 为了在 git 提交时利用 eslint 检查代码
   安装 yorkie: 可以使用 githooks，在提交时执行自己的插件
   安装 lint-staged：可以帮助只检查当次提交的代码
8. git commit 信息提交规范约束
   这个就不加强制约束了，但是提交规范可以尽量遵守约定试提交
9. UI 库 Vant

```
npm i vant@3

// 为了支持Vant库按需加载，安装babel-plugin-import，在配置babel插件
npm i babel-plugin-import -D
```

10. 安装请求库

```
npm install axios
```