摘要：使用插件安裝使用測試訪問頁面注意大大的紅字，如果要在本項目下測試，需要修改項目名稱，不然報項目名字和包名字是一致的錯，無法安裝的如下結束語這個筆記繼上一篇插件開發流程詳解從開發到發布至一，替換了開發和測試的項目架構。

　　前記：上一篇 https://www.cnblogs.com/adouw...，說到了一個完整的vue插件開發、發布的流程，總結下來就講了這么一個事，如何注入vue, 如果封裝vue插件，如何測試vue插件，以及如何發布vue插件到npm。但是，這里開發測試到發布是分開在兩個項目的，未免有些多余，今天的筆記講的就是在上一篇的基礎上，重新換了一下項目框架，講開發測試，到打包發布一個完整的項目，這個項目歡迎大家測試使用，一個基于vue上傳文件的一個插件，能夠顯示上傳的速度和進度，如果是圖片的話，也可以顯示上傳預覽，有bug即時反饋哦！

這里采用的是vue-cli 腳手架，版本是2.**，vue-cli 3.0 已經出來有一段了。今天暫不用3.0 的，回頭會詳細說上3.0的打包使用。項目目錄如下：

這個項目結構直接用 vue init webapck vue-upload ,腳手架生的模版，大架構我基本沒動，添加了一點自己的配置文件和新加了自己的文件夾。如下：

var path = require("path")
var webpack = require("webpack")

module.exports = {
  entry: "./src/plugin/ajax-upload.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    publicPath: "/dist/",
    filename: "vueAjaxUpload.js",
    library: "vueAjaxUpload", // library指定的就是你使用require時的模塊名，這里便是require("vueAjaxUpload")
    libraryTarget: "umd", //libraryTarget會生成不同umd的代碼,可以只是commonjs標準的，也可以是指amd標準的，也可以只是通過script標簽引入的。
    umdNamedDefine: true // 會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define。
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          "vue-style-loader",
          "css-loader"
        ],
      },      {
        test: /.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]"
        }
      }
    ]
  },
  resolve: {
    alias: {
      "vue$": "vue/dist/vue.esm.js"
    },
    extensions: ["*", ".js", ".vue", ".json"]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: "#eval-source-map"
}

if (process.env.NODE_ENV === "production") {
  module.exports.devtool = "#source-map"
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: ""production""
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

上面的配置文件也很簡單，主要就是入口文件和輸出文件，上面紅色標記的部分，我們需要經常修改的也是這個兩個參數，下面的打包規則我們可以不用多管。

在plugin下，新建ajax-upload.js ajax-upload.vue。

ajax-upload.js

import upload from "./ajax-upload.vue"
let ajaxUpload = {}
ajaxUpload.install = function (Vue, options) {
  Vue.prototype.$msg = "Hello I am test.js"
  Vue.prototype.$myMethod = function (arr) {
    if (arr.length < 0) {
      return false
    } else {
      arr = arr.join("連接你我")
      return arr
    }
  }
  Vue.component(upload.name, upload)
}
export default ajaxUpload

ajax-upload.vue

ajax-upload.js的講解： 引入同級目錄的ajax-upload.vue ，通過給一個自定義的對象添加install 方法，然后通過vue.component 方法注冊到vue。這里也可以給vue,通過原型方法注冊變量和方法。這里我們不需要，我們就只做了一個demo；

ajax-upload.vue的講解：里面具體的js業務邏輯不講解了，就提個 props，和name 的屬性，我們通過這個方法接受到父組件（調用該組件的組件）傳遞過來的參數，然后可以通過我們的定義的方法，如果是必須傳遞的參數，沒有該參數我們就alert 提示;name 屬性就是調用的封裝的標簽。為了減少項目的依賴插件的個數，我們也直接使用css不使用less等。

在dev文件夾下新建文件 dev-upload.vue

代碼：

這里使用組件就不直接在main.js下引入插件，直接在使用該插件的組件中，引入，然后通過vue.use 的方法使用組件：

import Vue from "vue"
import hupload from "../plugin/ajax-upload.js"
Vue.use(hupload)

使用組件，傳遞參數和接受參數

這里組件的通信 父組件 -> 子組件， 子組件 -> 父組件 ，通過props 接受到父組件的參數，通過事件的方式接受子組件傳遞過來的參數。

當然，要看到這個組件的使用是否正確，就要看頁面了，頁面路由 vue-router 如下：

訪問頁面正常顯示，沒有報錯：

上面第5步驟已經展示了插件是可以使用的，接下里就是打包了。

執行：

npm run dist

本地測試，先開頁面路由：

訪問頁面，沒有報錯：

以上看到了插件的引入方式不同。

測試OK了，接下里就是發布了（假設你這里已經登陸npm了），執行命令：

npm publish

記住，每發布一次，需要修改package.json 的版本號：

不然報錯。

發布完之后，我們就可以轉到我們的npm 官網上看看我們的項目。

https://www.npmjs.com/package...

安裝使用：
npm install vue-ajax-upload --save

測試：

訪問頁面：

注意：大大的紅字，如果要在本項目下測試，需要修改package.json 項目名稱，不然報項目名字和包名字是一致的錯，無法安裝的,如下；

　　結束語： 這個筆記繼上一篇 vue插件開發流程詳解-從開發到發布至npm（一），替換了開發和測試的項目架構。除了在npm 登陸的那快，基本都是可以跳過上一篇，直接看這篇的，這個插件可以顯示上傳圖片預覽，上傳速度和上傳進度，如果需要講解這部分話，請在下方留言，我會多帶帶開一篇講解這部分的內容。接下來的任務，還是需要做的vue 插件按需加載插件的方法，盡情期待我下一篇的筆記。如有不足，敬請指教，

如果覺得好的話，GitHub項目地址，麻煩給個star 呀！

如需轉載，請說明轉載出處。