@hexinfo/ares-ui NPM

Ares

goframe admin ui library

安装依赖

npm -g install yarn

yarn install

本地运行

npm run serve

编译打包

npm run build

生成API

需启动后台服务
确认API文档路径（package.json -> scripts -> api）配置正确
npm run api

开发使用debugger、console

package.json配置

"rules": {
  "no-debugger": 0,
  "no-console": 0
}

IE兼容性

vue.config.js配置

# 打包的时候vue.js、vue-router.js排除在外，然后再index.html里面单独引用
configureWebpack:{
    externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter'
    }
},

babel配置,node_module模块非es5语法转成es5语法

transpileDependencies: "@hex/gf-ui", "sm-crypto"

### vue-grid-layout 存在拉取无法拖拽到尾部情况处理
注意:只能在组中项目使用,否则容易报错
参考:[手动修复npm中bug](https://juejin.cn/post/7020302035207602183)
安装patch-package

yarn add patch-package -D

package.json 下修改

//添加postinstall "scripts": { "postinstall": "patch-package" }

常见目录patches/vue-grid-layout+2.4.0.patch,代码如下

diff --git a/node_modules/vue-grid-layout/dist/vue-grid-layout.common.js b/node_modules/vue-grid-layout/dist/vue-grid-layout.common.js index c25562f..d9f203a 100644 --- a/node_modules/vue-grid-layout/dist/vue-grid-layout.common.js +++ b/node_modules/vue-grid-layout/dist/vue-grid-layout.common.js @@ -12243,7 +12243,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va @return {Object} x and y in grid units. / // TODO check if this function needs change in order to support rtl.

calcXY: function calcXY(top, left) {

calcXY: function calcXY(top, left,width,height) { var colWidth = this.calcColWidth(); // left = colWidth x + margin (x + 1) // l = cx + m(x+1) // l = cx + mx + m @@ -12255,8 +12255,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va var x = Math.round((left - this.margin0) / (colWidth + this.margin0)); var y = Math.round((top - this.margin1) / (this.rowHeight + this.margin1)); // Capping

 x = Math.max(Math.min(x, this.cols - this.innerW), 0);

 y = Math.max(Math.min(y, this.maxRows - this.innerH), 0);

```
 const _width  = width||this.innerW
```

           const _height  = height|| this.innerH

           x = Math.max(Math.min(x, this.cols - _width), 0);

           y = Math.max(Math.min(y, this.maxRows - _height), 0);
 return {
   x: x,
   y: y