本文將幫助：將自己寫的Vue組件打包到npm進(jìn)行代碼托管，以及正常發(fā)布之后如何使用自己的組件。

　　本文講述的僅僅是最基礎(chǔ)的實現(xiàn)，其他復(fù)雜的操作需要非常熟悉webpack的相關(guān)知識，作者將繼續(xù)學(xué)習(xí)。

　　按照大佬文中寫的一步步操作，夠細(xì)心的話基本可以一步到位。下面總結(jié)一下發(fā)布步驟：

　　1. 利用Vue的腳手架新建一個簡易版的Vue項目my-project：

　　vue init webpack-simple my-project -> cd my-project -> npm i -> npm run dev

　　2. 編寫組件：

　　src下新建myPlugin文件夾用于存放所以開發(fā)的組件 -> 為每一個組件創(chuàng)建一個文件夾，其中存放一個vue組件文件和一個index.js配置文件 -> 在myPlugin下的最外層創(chuàng)建一個入口配置文件 -> 為每個人vue組件文件中加上一個name屬性

　　3. 測試組件：

　　在app.vue中測試一下自己的組件可不可以用

　　4. 編寫配置文件

　　為剛剛加入的每個組件文件夾中的index.js放入如下代碼：（其中l(wèi)dcPagination為組件名）

import ldcPagination from './index.vue';ldcPagination.install = Vue => Vue.component(ldcPagination.name, ldcPagination);//.name就是開始說的vue文件暴露出來的name名，ldcPagination整個組件export default ldcPagination;

　　為myPlugin下index.js放入如下代碼：（其中l(wèi)dcPagination為組件名，多個組件直接在components數(shù)組中加入并在最后輸出出來就行）（引入的公共樣式文件等都可以放這個文件中）

import ldcPagination from './Pagination/index.js';const components = [ ldcPagination]const install = function(Vue, opts = {}) { components.forEach(component => {  Vue.component(component.name, component); });}if (typeof window !== 'undefined' && window.Vue) { install(window.Vue);}export default { install, ldcPagination}

　　5. 改寫webpack.config.js配置文件

　　將其中的輸入輸出換成如下代碼：

var path = require('path')var webpack = require('webpack')const NODE_ENV = process.env.NODE_ENV;module.exports = {//entry: './src/main.js',//output: {//  path: path.resolve(__dirname, './dist'),//  publicPath: '/dist/',//  filename: 'build.js'// },  entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/index.js',  output: {   path: path.resolve(__dirname, './dist'),   publicPath: '/dist/',//路徑   filename: 'ldc-ui.js',//打包之后的名稱   library: 'ldc-ui', // 指定的就是你使用require時的模塊名   libraryTarget: 'umd', // 指定輸出格式   umdNamedDefine: true // 會對 UMD 的構(gòu)建過程中的 AMD 模塊進(jìn)行命名。否則就使用匿名的 define  },...}

　　6. 發(fā)布前準(zhǔn)備

　　改寫package.json中的private為false，加入"main": "dist/ldc-ui.js