npm 发布 vue 组件

建立 vue 组件

一、建立vue项目，为了简洁方便，推荐使用webpack-simple构建一个项目

vue init webpack-simple your-project

二、在 src 目录下新建子目录lib，用来放后面本身写的全部组件

三、编写本身的组件

首先新建一个vue文件和一个index.js
vue用于编写组件的模版和逻辑，像平时封装插件同样
ps：须要给组件命名 name: xxx，用于后面的导出
具体以下：
index.js 做用是将该组件做为 Vue 插件，注册到 Vue 中

/** index.js **/
import xTable from './x-table.vue';
xTable.install = Vue => Vue.component(xTable.name, xTable);//.name就是开始说的vue文件暴露出来的name名，ldcPagination整个组件
export default xTable

四、最后集中管理，所有导出，可同时编写多个组件组成组件库，一块儿导出
在App.vue同级目录我新建了一个index.js文件

// 导入全部组件
import xTable from './table/index.js'
import xTableCol from './table-column/index.js'

const components = [xTable, xTableCol, hello]
const install = function(vue) {
  /* istanbul ignore if */
  if (install.installed) return;
  /*eslint-disable*/
  components.map((component) => {
    vue.component(component.name, component); //component.name 此处使用到组件vue文件中的 name 属性
  });
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
};

export default {
  install,
  xTable,
  xTableCol
}

ps：若是是单个组件也能够不用编写第3中的与组件vue文件同级的index.js，直接在这里import引入，而后导出

五、修改配置文件
打包以前，首先咱们须要改一下 webpack.config.js 这个文件

// ... 此处省略代码 
// 执行环境
const NODE_ENV = process.env.NODE_ENV

module.exports = {
  // 改变入口
  entry: './src/lib/index.js',
  output: {
    // 修改打包出口，在最外级目录打包出一个 index.js 文件，咱们 import 默认会指向这个文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: "x-vue-element-table.min.js",
    library: "xEleTable", // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不一样umd的代码,能够只是commonjs标准的，也能够是指amd标准的，也能够只是经过script标签引入的
    umdNamedDefine: true // 会对 UMD 的构建过程当中的 AMD 模块进行命名。不然就使用匿名的 define
  },
  // ... 此处省略代码 
}

修改 package.json 文件（主要）：

// ... 此处省略代码 
// 发布开源所以须要将这个字段改成 false
"private": false,
// 这个指 import xEleTable 的时候它会去检索的路径
"main": "dist/vue-element-table.min.js",
// ... 此处省略代码

还有其余可配置项（非必须）

"bugs": {
    "url": "https://github.com/xxx/xxx/issues"
},
"repository": {
    "type": "git",
    "url": "git@https://github.com/xxx/xxx.git"
},

五、测试，测试这些配置是否OK以及组件是否可以正常运行
首先经过命令npm run build打包，打包完成后产生dist文件，这个打包以后的文件的文件名是在webpack.config.js

接着执行命令npm pack，会产生一个压缩包，在与webpack.config.js同一级目录
而后能够本地新建一项目测试是否可用
在测试项目中，经过npm install 组件项目打包后的本地绝对路径／文件全名添加依赖
在main.js入口文件引入便可

import 名称 from ‘组件库名’
Vue.use(名称);

具体可参考

import xEleTable from 'x-vue-element-table'
Vue.use(xEleTable)

而后在项目的任意组件中引用就好了，若是引入成功，则说明打包成功，而后在发布

发布到 npm

准备工做OK，如今开始正式发布

//首先去npm官网注册一个npm帐号
npm login    // 登录你的用户，密码
npm publish  // 进行发布

在这个过程当中，可能会出些问题，遇到具体问题可自行百度解决～
若是遇到如下这个错误
npm ERR! You do not have permission to publish "nodenpm". Are you logged in as the correct user? : nodenpm
多是本身的组件名与npm中已有的组件名冲突，须要换成另外一个还未被使用过的

另外提供几个常见错误解决方案（来自网络，有些本身遇到过～）
npm adduser报错Unable to authenticate？
npm publish项目报错

具体源码：x-vue-element-table源码

参考：
https://blog.csdn.net/qq_4051...
https://juejin.im/post/5b45df...
https://blog.csdn.net/cscscss...
https://blog.suzper.com/2017/...