发布Vue插件到npm的简单步骤

14,600 阅读1分钟

写在前面

这是本人今天的学习所得,用文字记录下来,留作资料查询以及给遇到此问题的朋友一个参考。

1.新建Vue插件

我们这里先写一个测试demo

<!--index.ts-->
export default {
  install(Vue: any, options: object = {}) {
    const log = (): void => {
      console.log('first plugin');
    }
    const add = (a: number, b: number): number => {
      return a * b
    }
    Vue.prototype.$log = log
    Vue.prototype.$add = add
  }
}

2.创建npm包

使用命令行打开 index.ts 所在目录 npm init 一路回车,创建出 package.json

3.注册npm账号

npm注册地址

4.切换npm源

命令行输入 npm config set registry http://www.npmjs.org

5.登陆npm

命令行输入 npm login

依次输入自己的Username、Password、Email

控制台输出 Logged in as <Username> on https://registry.npmjs.org//. 登陆成功

6.发布插件

命令行输入 npm publish --access=public

如遇报错

 try renaming your package to '@username/xxx' and publishing with 'npm publish --access=public' instead

进入package.json 修改 name 字段(可到npm官网去搜包的名字,如果没搜到则我们包可用)

再次 npm publish --access=public

+ @xxx/xxx@1.0.0

此输出说明大功告成,我们的插件已经发布到npm,快去 npm install xxx 尝鲜吧。