摘要：網上看了一些文章，一般都是把封裝好的格式的文件發布到，感覺不太像一般組件的封裝形式，故特意書寫此文，希望能幫助到各位碼友。本文以封裝一個分頁組件為例，把它生成目標文件，生成壓縮包測試，并發布到。修改輸出文件到下，生成文件名為。

網上看了一些文章，一般都是把封裝好的.vue格式的文件發布到npm，感覺不太像一般組件的封裝形式，故特意書寫此文，希望能幫助到各位碼友。
本文以封裝一個分頁組件為例，把它build生成目標js文件，pack生成壓縮包測試，并發布到npm。
項目初始化
封裝vue的插件用webpack-simple很合適，vue init webpack-simple vue-gitment 此命令創建我們的項目的目錄，創建文件夾和文件，最后結構是這樣的

lib目錄是我們的插件目錄，其他的默認就好。

組件內容
Pagination.vue 的內容如下：

index.js 用來安裝組件，內容如下：

import Pagination from "./Pagination.vue"

const pagination={
  install:function (Vue) {
    Vue.component("vPagination",Pagination)
  }
};
// 這里的判斷很重要
if (typeof window !== "undefined" && window.Vue) {
  window.Vue.use(pagination)
}
export default pagination

配置文件
package.json 內容如下：

{
  "name": "pagination",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "author",
  "license": "MIT",
  "private": false,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "directories": {
    "dist": "dist"
  },
  "dependencies": {
    "vue": "^2.4.4"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

webpack.config.js 內容如下：

module.exports = {
  entry: "./src/lib/index.js",
  output: {
    path: path.resolve(__dirname, "./dist/js"),
    publicPath: "/dist/",
    filename: "pagination.js",
    library: "pagination",
    libraryTarget: "umd",
    umdNamedDefine: true
  }
 // 其余默認就好 
};

entry：修改打包的入口文件。
output：修改輸出文件到 dist/js下，生成文件名為pagination.js。
library：指定的就是你使用require時的模塊名，這里便是require("pagination")。
libraryTarget：會生成不同umd的代碼,可以只是commonjs標準的，也可以是指amd標準的，也可以只是通過script標簽引入的。
umdNamedDefine：會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define。

build
控制臺輸入 npm run build，會生成下列文件：

pack打包生成壓縮包
修改package.json 內容如下：

{
  "name": "pagination",
  "description": "A vue.js 2.0 project on asynchronous paging ",
  "version": "0.1.0",
  "author": "y",
  "license": "MIT",
  "private": false,
  "main": "dist/js/pagination.js",
  "directories": {
    "dist": "dist"
  },
  "files": [
    "dist",
    "src"
  ],
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/yanzilingyan/vue.git"
  },
  "keywords": [
    "vue",
    "pagination",
    "ajax pagination"
  ],
  "dependencies": {
    "vue": "^2.4.4"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

控制臺輸入 npm pack，會看到在當前工程目錄下生成了一個文件 pagination-0.1.0.tgz

項目測試引入
另外新建一個工程項目，vue init webpack vue-ptest 此命令創建我們的項目的目錄，創建文件夾和文件，類似如下結構：

把剛才打包好的 pagination-0.1.0.tgz 這個壓縮包放到E盤目錄下（當然哪個位置都行，這里個人只是覺得方便些）。在當前 vue-ptest 這個工程目錄下，打開控制臺，輸入 npm install --save-dev E:pagination-0.1.0.tgz ， 安裝剛才打包好的文件包。
修改main.js文件，引入此包，內容如下：

import Vue from "vue"
import App from "./App"
import router from "./router"
import vPagination from "pagination"

Vue.config.productionTip = false;
Vue.use(vPagination);

new Vue({
  el: "#app",
  router,
  template: "",
  components: { App }
});

修改HelloWorld.vue文件，引入分頁組件，內容如下：

打開控制臺，輸入 npm run dev ，啟動。
看到界面如下顯示：

OK，分頁組件顯示正常。

發布到npm
完成測試工作后我們就可以發布到npm了，這個就比較見到了，注冊個npm賬號，在你要發布的項目目錄執行npm login，輸入賬號密碼和郵箱，然后npm publish就發布成功了。
代碼更多的詳細信息請查看 此文提供的項目源碼。

以上就是本文的全部內容，希望能對大家有所幫助。如果有更好的建議或優化，歡迎大家多多評論~~ ^_^ ~