Hrhx-Base
====

Overview
----

基于 [Ant Design of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 实现的 Ant Design Pro  Vue 版
Jeecg-boot 的前端UI框架，采用前后端分离框架，提供强大代码生成器的快速开发平台。
前端页面代码和后端功能代码一键生成，不需要写任何代码，保持jeecg一贯的强大！！



#### 前端技术
 
- 基础框架：[ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现
- JavaScript框架：Vue
- Webpack
- node
- npm
- eslint
- @vue/cli 3.2.1
- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
- [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
- [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation)  - antv/g2 封装实现

项目下载和运行
----

- 拉取项目代码
```bash
git clone http://192.168.2.103:8089/hrhx-base/hrhx-base-ui.git
cd  hrhx-base-ui
```

- 安装依赖
```
yarn
```

- 开发模式运行
```
yarn serve
```

- 编译项目
```
yarn build
```


其他说明
----

- 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请更新您的 cli

- 关闭 Eslint (不推荐) 移除 `package.json` 中 `eslintConfig` 整个节点代码

- 修改 Ant Design 配色，在文件 `vue.config.js` 中，其他 less 变量覆盖参考 [ant design](https://ant.design/docs/react/customize-theme-cn) 官方说明
```ecmascript 6
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */

          'primary-color': '#F5222D',
          'link-color': '#F5222D',
          'border-radius-base': '4px',
        },
        javascriptEnabled: true,
      }
    }
  }
```

附属文档
----
- [Ant Design Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn)

- [报表 viser-vue](https://viserjs.github.io/demo.html#/viser/bar/basic-bar)

- [Vue](https://cn.vuejs.org/v2/guide)

- [路由/菜单说明](https://github.com/zhangdaiscott/jeecg-boot/tree/master/ant-design-jeecg-vue/src/router/README.md)

Node-Sass
---
#### 关于 node-sass 版本问题

> Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

> 警告：不推荐使用 LibSass 和 Node Sass。 虽然他们将继续无限期地接收维护版本，但没有计划添加额外的功能或与任何新的 CSS 或 Sass 功能兼容。 仍在使用它的项目应该转移到 Dart Sass。

根据官方文档所言 `node-sass` 虽仍继续维护，但已不推荐使用，应转移到 `Dart Sass`，而 `Dart Sass` 在 `Npm` 上名为 `sass`

#### 卸载 `node-sass` 并安装 `sass`
```bash
$ npm uninstall node-sass sass-loader -D
$ npm install sass sass-loader@^10 -D
```
目前 `Node` 的稳定最新版本为 `v16.15.1`，完全兼容 `Sass`，经测试，`Node` 能够兼容到 `v12` 之上。但不兼容 `v13`。建议最低请从 `v14` 开始使用。⚠️ 请注意，`Node` 大版本号请使用 `偶数` 版本号。

#### ⚠️ 注意
使用 `sass` 替换掉 `node-sass` 之后，样式穿透 `/deep/` 将不再生效应改为 `::v-deep` 继续使用。

## **_本项目最终订版版本号：_**
#### **_Node 版本号：_**`v16.15.1`
#### **_yarn 版本号：_**`v1.22.10`

#### **_Npm 版本号：_**`v8.18.0`
⚠️ 注意：Npm安装依赖的时候，需要在 `npm install` 后面增加 `--legacy-peer-deps`。即：需要执行 `npm i --legacy-peer-deps`。 理由是：npm 升级到 7.x以上后，会出现上游依赖冲突；–legacy-peer-deps：安装时忽略所有 peerDependencie，默认使用npm 4-6版本的安装模式，安装过程中是会跳过对等依赖项。
