[Vue 进阶] 封装组件 并上传npm仓库

前景：在项目开发中，会用到重复的功能模块需求，普遍的做法是构造公用组件。但是想在新项目中重新使用，把公用组件扣出来，步骤繁琐。所以，小弟研究了下组件封装并上传 npm仓库，再此写下操作步骤。

首先要创建项目，我们用简介版本的webapck配置模板 ，配置简单 无烦恼

vue init webpack-simple my-project

cd my-project
npm i
npm run dev

import Page from './components/page'  // Page 插件对应组件的名字
export default{
    install:(Vue)=>{
        Vue.component('Page',Page)
    }
}

  
.....
  "name": "vue-custom-page", //我们打包定义的名称
  "description": "A Vue.js project",
  "version": "1.0.2",//我们上传的版本号
  "author": "",
  "license": "MIT",
  "private": false,//该字段改成false ,是否发布开源
  "main": "dist/Page.js",//在引用是它会去检索的路径，这里我们指向到打包完的dist目录下

....

..... 
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'Page.js',
    libraryTarget: 'umd',//指定的输出格式
    umdNamedDefine: true// 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },

....

npm run build

在 此处 本人踩了点坑，在官网 注册  验证邮箱时，发现怎么样都无法验证通过 报

you must verify your email before publishing a new package  （邮箱未验证，去官网验证一下邮箱）

我建议大家通过命令行进行注册

C:\Users\>npm adduser
Username: 
Password:
Email: (this IS public)

注册完后，大家再登录到官网去验证邮箱。

邮箱验证后 再通过

npm publish

就可以发布了

说下常见的错误，

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?

包名被占用，换个名字，可以去官网查下。

广告时间

这是小弟写的 自定义分页插件。 在项目根据 PageIndex，PageSize,PageTotal, 来实现自动分页、跳转、禁用按钮、等功能。

只需传入3个分页信息，任何触发操作 都会回调数据回来 二次操作   喜欢的朋友可以去下载

 <Page :pageinfo.sync="pageinfo" @getpageinfo="getchileervalue"></Page>

data () {
    return {
		pageinfo:{
			index:1,
			pagesize:10,
			total:'100'
		},
    }
  },

getchileervalue(data){
  		console.log(data)
  	}

npm

www.npmjs.com/package/vue…

github （求star，/厚脸）

github.com/wujingang/v…