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

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

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

這個(gè)項(xiàng)目結(jié)構(gòu)直接用 vue init webapck vue-upload ,腳手架生的模版，大架構(gòu)我基本沒動，添加了一點(diǎn)自己的配置文件和新加了自己的文件夾。如下：

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時(shí)的模塊名，這里便是require("vueAjaxUpload")
    libraryTarget: "umd", //libraryTarget會生成不同umd的代碼,可以只是commonjs標(biāo)準(zhǔn)的，也可以是指amd標(biāo)準(zhǔn)的，也可以只是通過script標(biāo)簽引入的。
    umdNamedDefine: true // 會對 UMD 的構(gòu)建過程中的 AMD 模塊進(jìn)行命名。否則就使用匿名的 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
    })
  ])
}

上面的配置文件也很簡單，主要就是入口文件和輸出文件，上面紅色標(biāo)記的部分，我們需要經(jīng)常修改的也是這個(gè)兩個(gè)參數(shù)，下面的打包規(guī)則我們可以不用多管。

在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 ，通過給一個(gè)自定義的對象添加install 方法，然后通過vue.component 方法注冊到vue。這里也可以給vue,通過原型方法注冊變量和方法。這里我們不需要，我們就只做了一個(gè)demo；

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

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

代碼：

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

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

使用組件，傳遞參數(shù)和接受參數(shù)

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

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

訪問頁面正常顯示，沒有報(bào)錯：

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

執(zhí)行：

npm run dist

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

訪問頁面，沒有報(bào)錯：

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

測試OK了，接下里就是發(fā)布了（假設(shè)你這里已經(jīng)登陸npm了），執(zhí)行命令：

npm publish

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

不然報(bào)錯。

發(fā)布完之后，我們就可以轉(zhuǎn)到我們的npm 官網(wǎng)上看看我們的項(xiàng)目。

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

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

測試：

訪問頁面：

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

　　結(jié)束語： 這個(gè)筆記繼上一篇 vue插件開發(fā)流程詳解-從開發(fā)到發(fā)布至npm（一），替換了開發(fā)和測試的項(xiàng)目架構(gòu)。除了在npm 登陸的那快，基本都是可以跳過上一篇，直接看這篇的，這個(gè)插件可以顯示上傳圖片預(yù)覽，上傳速度和上傳進(jìn)度，如果需要講解這部分話，請?jiān)谙路搅粞?，我會多帶帶開一篇講解這部分的內(nèi)容。接下來的任務(wù)，還是需要做的vue 插件按需加載插件的方法，盡情期待我下一篇的筆記。如有不足，敬請指教，

如果覺得好的話，GitHub項(xiàng)目地址，麻煩給個(gè)star 呀！

如需轉(zhuǎn)載，請說明轉(zhuǎn)載出處。