开发一个npm组件包

vue项目初始化

  • vue create mytest

开发一个npm组件包_第1张图片

  • 启动项目以后

组件开发

  • 开发的组件写在 package中 如下
  • 开发一个npm组件包_第2张图片
  • 如例 开发一个 listpage的组件 里面放了一个a链接
  • 开发一个npm组件包_第3张图片
  • 注册组件
  • 开发一个npm组件包_第4张图片
  • 配置打包
    开发一个npm组件包_第5张图片
"package": "vue-cli-service build --target lib ./src/package/index.js --name managerpage --dest managerpage"

target lib  打包到目标
name 打包后文件名字
dest  打包后文件夹名字
  • 执行 npm run package
  • 打包内容如图 终端切换到managerpage 自己安装 npm init -y
  • 开发一个npm组件包_第6张图片
  • 开发一个npm组件包_第7张图片

npm 发布

  • 首先在managerpage中 执行 npm init -y 安装package.json
  • 执行 npm adduser 进行 npm 登录 (输入npm的登录账号密码邮箱)
  • 执行 npm publish 进行发布

发布成功

+开发一个npm组件包_第8张图片
页面使用 npm i managerpage

+在这里插入图片描述
在这里插入图片描述

效果

开发一个npm组件包_第9张图片

有用就帮我点个赞吧 谢谢

你可能感兴趣的:(npm,前端,node.js)