创建 vue 组件1、创建vue项目，为了简洁方便，推荐使用webpack-simple构建一个项目vue init webpack-simple your-project2、在 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 xTable4、最后集中管理，全部导出，可同时编写多个组件组成组件库，一起导出在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_ENVmodule.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/…