vue项目封装组件发布到npm笔记

一、创建项目

新建一个文件夹，在该文件夹目录下的控制台执行vue init webpack-simple，创建vue新项目，然后在执行npm install安装依赖，创建好vue项目后，在src下新建一个放组件源码的文件夹，我下面是两个组件，最好是所有组件放在一个文件夹。

二、创建组件

自己随便写一个小的ui组件，自己测试一下没问题即可。

<template>
  <div class="calculate">
    <div class="button">按钮</div>
  </div>
</template>
<script>
  export default({
    name:'OButton',
    data() {
      return{
      }
    },
    mounted() {
    },
    methods:{
    }
  })
</script>
<style>
.button{
	width:100px;
	height:50px;
	color:#fff;
	background:blue;
	border-radius: 4%;
}
  
</style>

新建组件库的出口文件，index.js，如下：

// sumFunction 插件对应组件的名字
import sumFunction from './sum';
import secondPage from '../secondPage/pack.vue';

// 此处注意，组件需要添加name属性，代表注册的组件名称，也可以修改成其他的
 
//　sumFunction.install = Vue => Vue.component(sumFunction.name, sumFunction);//注册组件,方法1
// 注册组件，方法二：
const components = {
	install(Vue){
		Vue.component('sumFunction', sumFunction)
		Vue.component('secondPage', secondPage)
	}
}

if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(components)
}
// 暴露组件供其使用
export default components;

 修改package.json文件，主要是下面三处，name为打包的库名，npm上有同名的则修改该名称就好，发布到npm上开源，则private私有改为false， main结点配置，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径：

 修改webpack.config.js,主要是配置打包的入口和出口

打包：npm run build 则生成了dist文件。

三、发布到npm上

首先自己要有npm账号，没有的话去npm上注册一个， https://www.npmjs.com/

注册账号后要进行邮箱验证，即npm会发一个链接到你邮箱，点进去登入npm账号即进行了验证。（不验证的话发布项目会报错）

然后在你项目的根目录下，进入控制台，执行

登入npm账号：npm login

输入用户名，密码，邮箱，即可登入成功。

再执行npm publish，若无报错，则发布成功

四、使用

像平常使用别人的组件一样，先下载npm install secondzzl --save，secondzzl是你package.json

中的库名字name。

然后在main.js中引入，像element-ui一样引入：

在需要的组件使用：

组件名称是你在组件出口文件index.js中注册的组件名称

 

五、报错处理

（1）no_perms Private mode enable, only admin can publish this module
　　　　这是因为镜像设置成淘宝镜像了，设置回来即可

  npm config set registry http://registry.npmjs.org　

（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
　　　　邮箱未验证，去官网验证一下邮箱