封装vue组件发布到npm(详细步骤)

准备工作

1.注册npm账号:https://www.npmjs.com/

2.保证当前环境下安装了 vue、webpack、node

创建组件项目

//  完整配置模板
vue init webpack 项目名称

//  更简洁的webapck配置模板
vue init webpack-simple 项目名称

如果是封装组件建议用第二个

我们就来创建一个button作为例子图片[1] - 封装vue组件发布到npm(详细步骤) - 捕风阁

创建完成后安装依赖

npm install

启动项目

npm run dev

 

创建组件

我们在src 目录下创建lib 文件夹 用于存放不同的组件,且在为每个组件创建一个文件夹,在该文件夹目录下存放要发布的组件和index.js 用于将组件导出

图片[2] - 封装vue组件发布到npm(详细步骤) - 捕风阁

button.vue

<template>
    <button><slot></slot></button>
</template>
 
<script>
export default {
    name: "osuuButton"
}
</script>
 
<style scoped>
 
</style>

同级的index.js是为了将其导出

//  osuuButton 是对应组件的名字,要记得在 button.vue 文件中还是 name 属性哦
import osuuButton from './button.vue';
osuuButton.install = Vue => Vue.component(osuuButton.name, osuuButton);
export default osuuButton;

如有其它多个组件 则重复上面的步骤 都放在lib文件夹下

导出全部组件

在src目录下创建index.js 作为程序的入口文件,在index.js 将所有的组件全部导出

import osuuButton from './lib/button/index';
// ...如果还有的话继续添加
 
const components = [
    osuuButton,
  // ...如果还有的话继续添加
]
 
const install = function (Vue, opts = {}) {
  components.map(component => {
    Vue.component(component.name, component);
  })
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
 
export default {
  install,
  osuuButton
  // ...如果还有的话继续添加
}

说明:在注册组件的时候,如果有加以下这段自动注册的代码,那么在用npm install安装依赖的时候,该插件就会被自动安装,如果没有加以下自动安装代码,那么使用npm install新增的依赖并不会自动安装,需要手动安装缺少的依赖。

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

修改webpack.config.js

图片[3] - 封装vue组件发布到npm(详细步骤) - 捕风阁

 

配置package.json

图片[4] - 封装vue组件发布到npm(详细步骤) - 捕风阁

  • name: 包名,该名字是唯一的。可在 npm 官网搜索名字,如果存在则需换个名字。
  • version: 版本号,每次发布至 npm 需要修改版本号,不能和历史版本号相同。
  • description: 描述。
  • main: 入口文件,该字段需指向我们最终编译后的包文件。
  • keywords:关键字,希望用户最终搜索的词,为数组。
  • author:作者
  • private:是否私有,需要修改为 false 才能发布到 npm
  • license: 开源协议 以下为参考设置
  • repository:存储代码的地址
  • homepage:官网

添加 .npmignore

我们发布到 npm 中,只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。 和 .gitignore 的语法一样,具体需要提交什么文件,看各自的实际情况。

如果没有此文件将会直接取用.gitignore 文件,因此一般情况无需添加.npmignore

图片[5] - 封装vue组件发布到npm(详细步骤) - 捕风阁

将dist文件夹取消忽略,也就是删除图中红框哪一行

打包

npm run build

发布

//  npm 登录
npm login

//  发布
npm publish

使用

打开新的项目,安装我们的组件

npm i osuu-button

在main.js导入

import osuu from 'osuu-buttons'
Vue.use(osuu);

//  这里的osuu自定义就行无需和组件名称一样

页面使用

<template>
  <div>
    <osuuButton>测试按钮</osuuButton>
    <!-- 
      如果是多个组件,只需要用src/index.js内注册的组件名称即可直接使用
      因为我们在抛出的时候已经注册过了
     -->
  </div>
</template>

npm常用操作

npm config set registry https://registry.npm.taobao.org //设置淘宝镜像
npm config set registry https://registry.npmjs.org //设置官方镜像
npm config get registry //获取镜像地址
npm --force unpublish safe_manage_view //删除npm包
npm login //npm 登录
npm publish //npm 发布包
npm install --save hzm-npm-test //安装包

常见问题

注意:发布的时候需要将镜像源设置为官方镜像

(1)no_perms Private mode enable, only admin can publish this module

这是因为镜像设置成淘宝镜像了,设置回来即可

(2)npm publish failed put 500 unexpected status code 401

一般是没有登录,重新登录一下 npm login 即可

(3)npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?

包名被占用,改个包名即可。最好在官网查一下是否有包名被占用,之后再重命名

(4)you must verify your email before publishing a new package

邮箱未验证,去官网验证一下邮箱

(5)426 Upgrade Required – PUT http://registry.npmjs.org/osuu-button

一般是镜像协议问题,注意设置为官方镜像源的时候https协议  https://registry.npmjs.org

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片