k-form-design 改成自己组件步骤

tonysh_zds

已于 2022-11-16 20:17:14 修改

阅读量2k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-11-16 13:09:22 首次发布

本文链接：https://blog.csdn.net/tonysh_zds/article/details/127883117

版权

vue 专栏收录该内容

91 篇文章 1 订阅

订阅专栏

本文档详细介绍了如何修改 Vue 可视化表单设计器 kk-form-design 的 package.json 文件，包括名称、打包配置、版本号、入口文件、代码内部引用等关键步骤。此外，还涵盖了打包过程、切换 npm 源、检查登录状态、发布到 npm 以及验证发布结果的整个流程。

摘要由CSDN通过智能技术生成

1）修改package.json

{
  "name": "kk-form-design",
  "version": "1.0.2",
  "private": false,
  "description": "基于vue、ant-design-vue的表单设计器,可视化开发表单",
  "license": "MIT",
  "author": "kchengz",
  "keywords": [
    "ant-design",
    "form",
    "kk-form-design",
    "表单设计器",
    "表单设计",
    "可视化",
    "工作流"
  ],
  "bugs": {
    "url": "https://github.com/Kchengz/kk-form-design/issues"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/Kchengz/kk-form-design"
  },
  "main": "lib/kk-form-design-mini.umd.min.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name kk-form-design --dest lib packages/index.js && npm run lib:mini",
    "lib:mini": "vue-cli-service build --target lib --name kk-form-design-mini --dest lib packages/mini.js --no-clean",
    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue packages/",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "ant-design-vue": "1.7.8",
    "babel-polyfill": "^6.26.0",
    "clipboard": "^2.0.6",
    "core-js": "^2.6.5", 
    "moment": "^2.24.0",
    "vcolorpicker": "^1.1.0",
    "vue": "^2.6.10",
    "vue-codemirror-lite": "^1.0.4",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.3",
    "vuedraggable": "^2.23.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.0",
    "@vue/cli-plugin-eslint": "^3.1.0",
    "@vue/cli-service": "^4.2.3",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "prettier": "^1.18.2",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {
      "prefer-const": "error",
      "no-console": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

注意：
1.1）name名字修改
“name”: “kk-form-design”,
1.2）打包名字修改

"lib": "vue-cli-service build --target lib --name kk-form-design --dest lib packages/index.js && npm run lib:mini",
    "lib:mini": "vue-cli-service build --target lib --name kk-form-design-mini --dest lib packages/mini.js --no-clean",
    ```
   1.3)版本修改
    每次发布一个新版本，版本号修改
    ```
     "version": "1.0.2",
    ```
    1.4）入口文件名修改
    要与打包后的文件名一致（npm run lib）
    ```
      "main": "lib/kk-form-design-mini.umd.min.js",
    ```
    1.5)packages/utils/index.js修改
    ``
 // 发布npm 需要切换到这个
export { pluginManager, revoke, nodeSchema, lazyLoadTick } from "kk-form-design";

// 本地测试
/*export { pluginManager } from "./PluginManager";
export { revoke } from "./Revoke";
export { nodeSchema } from "./NodeSchema";
export { lazyLoadTick } from "./LazyLoadTick";*/

1.6) 代码中名称修改
packages/KFormDesign/index.js

import DlxFormDesign from "./index.vue";

DlxFormDesign.install = function(Vue) {
Vue.component(DlxFormDesign.name, DlxFormDesign);
};

export default DlxFormDesign;

packages/KFormDesign/index.vue

export default {
  name: "DlxFormDesign",
...
}

packages/use.js

// 导入单个组件
import DlxFormDesign from "./components/KFormDesign/index";
export { DlxFormDesign, KFormBuild, KFormItem };

// 这里默认导出全部组件
export default {
  install,
  DlxFormDesign,
  // KFormPreview,
  KFormBuild,
  KFormItem
};

1.7) k-form-build改dlx-form-build

       modified:   packages/components/KFormBuild/index.js
        modified:   packages/components/KFormBuild/index.vue
        modified:   packages/components/KFormDesign/module/codeModal.vue
        modified:   packages/components/KFormPreview/index.vue

2  ）打包

npm run lib

3)更改npm 源
切换官方源才能上传

npm config set registry https://registry.npmjs.org

后续若需要切回淘宝源

npm config set registry https://registry.npm.taobao.org

5)检查npm ip地址

ping www.npmjs.com

在这里插入图片描述
设置:C:\windows\system32\drivers\etc\hosts本地dns

104.16.93.83  www.npmjs.com
104.16.93.83  registry.npmjs.org

刷新dns

ipconfig /flushdns

登录或检查是否登录

npm login
npm whoami

5)发布
在根目录下执行,调用根目录下的package.json执行发布

npm publish

6）发布后查看发布结果

https://www.npmjs.com/package/kk-form-design

在这里插入图片描述

tonysh_zds

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
k-form-design 改成自己组件步骤

k-form-design 改成自己组件步骤
复制链接

扫一扫

专栏目录