共计 2570 个字符，预计需要花费 7 分钟才能阅读完成。
创建 vue 组件
1、创建 vue 项目，为了简洁方便，推荐使用 webpack-simple 构建一个项目
vue init webpack-simple your-project
2、在 src 目录下新建子目录 lib，用来放后面自己写的所有组件
3、编写自己的组件
首先新建一个 vue 文件和一个 index.jsvue 用于编写组件的模版和逻辑，像平时封装插件一样 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
4、最后集中管理，全部导出，可同时编写多个组件组成组件库，一起导出在 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 引入，然后导出
5、修改配置文件打包之前，首先我们需要改一下 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”
},
5、测试，测试这些配置是否 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/…
