pier-front-common-toolkits-vue-2 v2.5.3

如何发布

npm config set registry https://registry.npmjs.org
npm login // 登录命令
Username: // 输入注册时候的用户名
Password: // 密码
Email: (this IS public) // 注册时的邮箱
npm publish

目录结构

目录结构参考element-ui 在packages目录下每个组件单独分包 其他内容放在src下面，

组件使用index.js的形式来进行export

开发环境

Node：v16.15.1

如何在项目中引用

1. 本地开发环境：npm link pier-front-common-toolkits-vue-2 或者 已经发布的版本：yarn add pier-front-common-toolkits-vue-2

2. main.js中引入组件

   import PierFrontCommonToolKits from 'pier-front-common-toolkits-vue-2'

3. Vue.use 全局初始化组件

   注意必须是在Vue.use(Element);之后导入下方函数

   Vue.use(PierFrontCommonToolKits, {
       pierComponentFunction: {
           collect: {
               createFieldCollection: commonService.createFieldCollection,
               removeFieldCollection: commonService.removeFieldCollection,
               getFieldCollectionList: commonService.getFieldCollectionList
           },
           searchField: {
               getVintage: commonService.getVintage,
           }
       }
   })

   其中pierComponentFunction表示部分项目中要实现的函数，如果没有这些函数，对应组件的对应功能可能不起作用

4. 在对应的页面中直接使用即可，目前暂时没有代码提示。。。

组件迁移流程

需要多项目复用的组件，需要从项目中迁移至pier-front-common-toolKits-vue2，下面主要说明了迁移流程和部分注意点

迁移流程（以tableOption为例）

1. 建立组件的目录

   pier-front-common-toolKits-vue2/packages/tableOption

   pier-front-common-toolKits-vue2/packages/tableOption/src

2. 将内容移植到 pier-front-common-toolKits-vue2/packages/tableOption/src 中

3. 处理组件内部的引用，将引用全部指向pier-front-common-toolkits-vue-2包内地址

4. 使用index.js输出组件

   import TableOption from "./src/TableOption.vue";
   /* istanbul ignore next */
   TableOption.install = function(Vue) {
       Vue.component(TableOption.name, TableOption);
   };
   
   export default TableOption;

5. 在/pier-front-common-toolKits-vue2/src/index.js中添加引用

   import BatchOperationTable from "../packages/batchOperationTable/index.js";
   import CheckIcon from "../packages/checkIcon/index.js";
   import Collect from "../packages/collect/index.js";
   import DataVersionPick from "../packages/dataVersionPick/index.js";
   import SearchField from "../packages/searchField/index.js";
   import TableOption from "../packages/tableOption/index.js";
   
   const components = [
       CheckIcon,
       TableOption,
       Collect,
       SearchField,
       DataVersionPick,
       BatchOperationTable
   ];

其他注意事项

• 组件内尽量不要放业务相关的逻辑。

• 对于其他组件或者内容的引用，需要使用pier-front-common-toolkits-vue-2包内的地址

import commonService from "@/services/commonService";
import cacheService from "@/services/cacheService";
import DataVersionPick from "#/dataVersionPick";
import Collect from "#/collect";

本地开发与测试

本地开发与调试

1. 在pier-front-common-toolKits-vue2目录中使用npm link建立软连接，当最后一行出来类似下方的提示，则link成功

   /Users/mirkmf110/.nvm/versions/node/v12.0.0/lib/node_modules/pier-front-common-toolkits-vue-2 -> /Users/mirkmf110/Documents/ownGit/pier-front-common-toolKits-vue2

   整体流程截图

   MacBook-Pro:pier-front-common-toolKits-vue2 mirkmf110$ npm link
   
   > yorkie@2.0.0 uninstall /Users/mirkmf110/Documents/ownGit/pier-front-common-toolKits-vue2/node_modules/yorkie
   > node bin/uninstall.js
   
   husky
   uninstalling Git hooks
   done
   
   npm WARN ajv-formats@2.1.1 requires a peer of ajv@^8.0.0 but none is installed. You must install peer dependencies yourself.
       npm WARN css-minimizer-webpack-plugin@3.4.1 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.
       npm WARN eslint-webpack-plugin@3.2.0 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.
       npm WARN mini-css-extract-plugin@2.6.1 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.
       npm WARN node-fetch@2.6.7 requires a peer of encoding@^0.1.0 but none is installed. You must install peer dependencies yourself.
       npm WARN postcss-loader@6.2.1 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.
       npm WARN terser-webpack-plugin@5.3.6 requires a peer of webpack@^5.1.0 but none is installed. You must install peer dependencies yourself.
       npm WARN thread-loader@3.0.4 requires a peer of webpack@^4.27.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
       npm WARN webpack-dev-server@4.11.0 requires a peer of webpack@^4.37.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
       npm WARN ws@8.8.1 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
       npm WARN ws@8.8.1 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
       npm WARN ws@7.5.7 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
       npm WARN ws@7.5.7 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
       npm WARN pier-front-common-toolkits-vue-2@0.1.0 No repository field.
   
       added 1 package from 1 contributor, removed 751 packages, updated 1 package and audited 2358 packages in 10.393s
   found 58 vulnerabilities (36 moderate, 13 high, 9 critical)
   run `npm audit fix` to fix them, or `npm audit` for details
                                                       /Users/mirkmf110/.nvm/versions/node/v12.0.0/lib/node_modules/pier-front-common-toolkits-vue-2 -> /Users/mirkmf110/Documents/ownGit/pier-front-common-toolKits-vue2

2. 在项目中 使用 npm link pier-front-common-toolkits-vue-2 进行软连接

   MacBook-Pro:dom-fare-front mirkmf110$  npm link pier-front-common-toolkits-vue-2
   /Users/mirkmf110/Documents/git/dom-fare-front/node_modules/pier-front-common-toolkits-vue-2 -> /Users/mirkmf110/.nvm/versions/node/v12.0.0/lib/node_modules/pier-front-common-toolkits-vue-2 -> /Users/mirkmf110/Documents/ownGit/pier-front-common-toolKits-vue2

3. link之后，在pier-front-common-toolkits-vue-2项目中 npm run build ，调整的内容会自动发布到对应的项目中

组件中后台请求的逻辑的调整

组件内部需要有部分从后台请求进行处理的内容，需要将这部分的函数抽出来，从外部进行引用。

全局注册组件函数

• 将外部传入函数进行全局安装，如果有新的组件函数需要加入，需要在/pier-front-common-toolKits-vue2/src/index.js写下，初始化为null:

//需要远程调用的一些函数
let pierComponentFunction = {
    collect: {
        createFieldCollection: null,
        removeFieldCollection: null,
        getFieldCollectionList: null
    },
    searchField: {
        getVintage: null,
    }
}
Object.entries(opts.pierComponentFunction).forEach(([k, v]) => {
    pierComponentFunction[k] = v
})
Vue.prototype.$pierComponentFunction = pierComponentFunction

• 在项目中引用的时候，也需要将外部函数传入

  Vue.use(PierFrontCommonToolKits, {
      pierComponentFunction: {
          collect: {
              createFieldCollection: commonService.createFieldCollection,
              removeFieldCollection: commonService.removeFieldCollection,
              getFieldCollectionList: commonService.getFieldCollectionList
          },
          searchField: {
              getVintage: commonService.getVintage,
          }
      }
  })

组件内部的调整

在组件中需要使用后台地址时，需要进行调整，下面以collect组件为例进行说明,

调整前

let res = await this.getFieldCollectionList(params);

调整后

let res = await this.$pierComponentFunction.collect.getFieldCollectionList(params);