pier-front-common-toolkits-vue-2 v3.2.59
如何发布
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
如何在项目中引用
本地开发环境:npm link pier-front-common-toolkits-vue-2 或者 已经发布的版本:yarn add pier-front-common-toolkits-vue-2
main.js中引入组件
import PierFrontCommonToolKits from 'pier-front-common-toolkits-vue-2'
Vue.use 全局初始化组件
注意必须是在Vue.use(Element);之后导入下方函数
Vue.use(PierFrontCommonToolKits, { pierComponentFunction: { collect: { createFieldCollection: commonService.createFieldCollection, removeFieldCollection: commonService.removeFieldCollection, getFieldCollectionList: commonService.getFieldCollectionList }, searchField: { getVintage: commonService.getVintage, } } })
其中pierComponentFunction表示部分项目中要实现的函数,如果没有这些函数,对应组件的对应功能可能不起作用
在对应的页面中直接使用即可,目前暂时没有代码提示。。。
组件迁移流程
需要多项目复用的组件,需要从项目中迁移至pier-front-common-toolKits-vue2,下面主要说明了迁移流程和部分注意点
迁移流程(以tableOption为例)
建立组件的目录
pier-front-common-toolKits-vue2/packages/tableOption
pier-front-common-toolKits-vue2/packages/tableOption/src
将内容移植到 pier-front-common-toolKits-vue2/packages/tableOption/src 中
处理组件内部的引用,将引用全部指向pier-front-common-toolkits-vue-2包内地址
使用index.js输出组件
import TableOption from "./src/TableOption.vue"; /* istanbul ignore next */ TableOption.install = function(Vue) { Vue.component(TableOption.name, TableOption); }; export default TableOption;
在/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";
本地开发与测试
本地开发与调试
在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
在项目中 使用 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
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);
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
11 months ago
12 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago