如何将组件发布到NPM库-详解

102 阅读1分钟
  1. 搭建发布环境 a) 下载node(nodejs.cn/download/) b) 下载vue-cli(npm install @vue/cli)

  2. 创建一个vue项目( vue create myui )

  3. 修改默认文件夹src为examples

  4. 新建一个packages文件夹

  5. 修改vue.config.js文件 在这里插入图片描述

  6. 编写组件代码 a) 先新建一个简单的button组件, b) Packages文件夹下新建一个组件文件夹和入口文件index.js 在这里插入图片描述

c) 然后srcs文件夹下存放组件源代码 在这里插入图片描述 d) 在button下的index.js l里编写如下代码 作为vue组件的安装(详细文档可以看vue官网的组件篇) 在这里插入图片描述

e) 接下来在packages的入口文件中导入组件并安装导出 在这里插入图片描述 7. 组件编写完毕 进入packages文件夹下 实例化一个package.json(npm init -y) 在这里插入图片描述 a) name:包名,version:版本号,description:组件描述,main:入口文件 8. 登录npm官网(www.npmjs.com) a) 没有账号新注册一个 b) 切换到npm官方源 i. 查看npm当前源( npm config get registry 或者 npm config list ) ii. 设置回原本的源,用来发布npm包( npm config set registry registry.npmjs.org/ ) iii. 设置为淘宝镜像(npm config set registry registry.npm.taobao.org) 9. 首次需要设置用户名密码绑定npm a) npm adduser ( 输入改行密令 会让你绑定自己的账号 按提示输入 ) b) 邮箱认证( 点击npm官网头像选择账户,点击2FA认证) 注意:认证需要下载一个authenticator应用程序(问我要) c) 切换到要发布的包( cd packages ) d) 执行发布密令( npm publish ) 10. 返回npm官网查看发布是否成功