1、下载nrm
npm install nrm -g --save
查看当前npm源
nrm ls
注：下载nrm后如果没法使用 请尝试用npm install nrm@1.1.0 -g --save 下载
2、添加自己的源地址
nrm add 源名称 源地址
3、切换/使用源
nrm use 源名称
4、编写/重构组件
├─examples // 原 src 目录，改成 examples 用作示例展示
│ ├─assets
│ ├─components
│ ├─router
│ ├─store
│ └─views
├─lib //打包出上传npm的文件
│ ├─demo.html
│ ├─kingc.umd.js
│ └─kingc.css
├─packages // 新增 packages 用于编写存放组件
│ ├─components
│ │ └─Test //每个组件都要新建一个文件夹，然后添加index.js以及src文件夹。
│ │ ├─src
│ │ │ └─Test .vue
│ │ └─index.js //每一个组件需要将其导出
│ └─index.js
└─public
5、修改package.vue文件
"name": "Test", //名称
"version": "1.0.0", //版本号
"description": "Test组件库测试", //描述
"main": "lib/Test.umd.js", //入口文件//
"keyword": "Test",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib --name Test--dest lib packages/index.js" //添加编译执行命令
},
6、编译
npm run lib
7、上传nrm私服
先切换源 nrm use Test
登入npm npm login --registry=源地址
依次输入 账号密码邮箱
例如：
账号：admin
密码：admin123
邮箱：test@163.com
8、推送到npm服务器
npm publish --registry=源地址
**下载使用自己封装上传的组件依赖跟正常使用npm install 下载一样
如有不正之处，欢迎各位大佬指正🙂
网友评论