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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

注意：
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

import DlxFormDesign from "./index.vue";

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

export default DlxFormDesign;
1
2
3
4
5
6
7

packages/KFormDesign/index.vue

export default {
  name: "DlxFormDesign",
...
}
1
2
3
4

packages/use.js

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

// 这里默认导出全部组件
export default {
  install,
  DlxFormDesign,
  // KFormPreview,
  KFormBuild,
  KFormItem
};
1
2
3
4
5
6
7
8
9
10
11
12

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
1
2
3
4

2  ）打包
1

npm run lib
1

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

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

后续若需要切回淘宝源

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

5)检查npm ip地址

ping www.npmjs.com
1

设置:C:\windows\system32\drivers\etc\hosts本地dns

104.16.93.83  www.npmjs.com
104.16.93.83  registry.npmjs.org
1
2

刷新dns

ipconfig /flushdns
1

4. 登录 或检查是否登录

npm login
npm whoami
1
2

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

npm publish
1

6）发布后查看发布结果

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