靈活使用vue單文件組件之--最少配置打包.vue組件

forrest23 發布于2019-08-02 16:00 / 1464人閱讀

摘要：但是，面對辣么多的配置文件，還是從開始自己來吧，畢竟我只想打包一個組件。這里想一下我們的需求，我們想要打包一個組件，使用，根據上面的說明，不難想到還應該需要一個可以用來識別并轉換文件，一句話，就是把按下面格式的編寫的組件轉換為模塊。

對于vue單文件組件的使用，我們知道使用vue-cli可以快速生成項目結構，進行.vue單文件組件的編寫，使用 npm run build命令會從main.js開始打包項目中的依賴(通常main.js中引用App.vue，作為頁面最高層級的組件，我們自己寫的組件會在App.vue中引用)，build的結果會生成打包好的靜態js/css文件以及index.html，這對于寫單頁應用來說非常方便，但是，變化的需求總是很多的~

如果我只想在html頁面里用到我寫的vue組件（同時個人也更加偏向使用html頁面的寫法），而不是構建一整個單頁應用，在vue-cli里可以嗎？？？當然可以做到，了解其中的配置，修改成自己想要的樣子，我們可以做到只打包一個組件的效果。

但是，面對辣么多的配置文件，還是從0開始自己來吧，畢竟我只想打包一個.vue組件。在正式開始寫示例代碼之前，為了文章的完整性，先簡單介紹一下幾個工具。

webpack

webpack是干嘛的？他是一個模塊打包器，他的目標就是將JavaScript文件都打包到一起，用于在瀏覽器中使用，即可以通過 現在正式開始

先建立一個文件夾：testproject;

命令行進入到testproject ,運行 npm init,根據命令行提示，進行項目的一些初始化操作;

完成之后，我們的項目中就會有package.json文件，打開package.json，配置打包需要的一些dependence，這里我就是從一個vue-cli項目的package.json文件中拷過來一些基本的依賴，如下：
其中dependencies里就是拷過來依賴的部分

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.4",
    "css-loader": "^0.28.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "file-loader": "^1.1.4"
  }
}

運行 npm install,稍等片刻，我們需要的模塊就ok了。
這里說明一下，npm包之間也存在依賴關系，如果存在有‘依賴的依賴’ 你沒有寫到配置的dependencies中，命令行會有提示，注意看。為什么說這個，因為我在拷貝依賴的時候，就略過了‘file-loader’，
so sad.^_^

現在可以寫我們的示例內容了，這里我們設定我們要寫的組件為hello.vue，組件打包后的名字叫hellobundle.js,我們在sayhello.html中要引用的組件就是打包后的hellobundle.js，直接在testproject目錄下新建相關文件，內容如下：





  
  Title

很簡單的內容，現在我們想要打包hello.vue這個組件，對于打包我們選擇使用script命令+webpack.config.js的方式（這里不了解可以移至webpack官方指南，說明很詳細），還是在根目錄，新建webpack.config.js文件，內容如下：

//webpack.config.js
const path = require("path")
module.exports = {
  entry  : "./hello.vue",             //入口文件
  output : {
    filename : "hellobundle.js",     //出口文件名
    path     : path.resolve(__dirname),    //當前目錄
    library  : "hello"       // 打包后模塊的名稱
  },
  module : {     
    rules : [    //定義不同類型的文件使用的loader
      {
        test   : /.vue$/,
        loader : "vue-loader"
      },
      {
        test   : /.js$/,
        loader : "babel-loader"
      }
    ]
  }
}

這里差不多是最簡化的配置，hello.vue作為我們打包的入口文件，配置出口文件的名稱、路徑以及最終模塊對外的名稱，寫好了這個，再在package.json中加上一條script命令，如下：

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build":"webpack"     //<-------就四這行，，
  },

寫好了.vue組件文件、webpack的配置文件，現在我們運行npm run build, 結果如下：

在testproject目錄下，我們也如愿得到了hello.vue打包后的hellobundle.js，整個testproject結果如下

終于，我們可以來驗證這個打包后的hellobundle.js是否可用了，在瀏覽器打開sayhello.html:

ofcourse you can see yellow hello,,這里說一下我們的sayhello頁面中，注冊組件時用到的是：
components:{

  hello:hello.default    //這里我們后面會解釋為什么這樣寫
}

其實在一開始的時候，我用的是webpack配置的hello變量，然后打開sayhello頁面時并沒有出現預期的效果，于是在控制臺打印了一下我們hellobundle.js輸出的hello變量：

so,就更正了一下hello的引用。

結語

本著最簡原則，示例中的項目結構沒有按照src/dist這樣規范的目錄結構來寫，寫到這一步之后，我們可以繼續深入完善我們的打包功能，對webpack使用命令行參數動態打包文件、hot-reloading等，這樣的話，就又復雜了，不再贅述。--end 歡迎指正^_^

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54503.html

靈活使用vue單文件組件之--最少配置打包.vue組件

摘要：但是，面對辣么多的配置文件，還是從開始自己來吧，畢竟我只想打包一個組件。這里想一下我們的需求，我們想要打包一個組件，使用，根據上面的說明，不難想到還應該需要一個可以用來識別并轉換文件，一句話，就是把按下面格式的編寫的組件轉換為模塊。對于vue單文件組件的使用，我們知道使用vue-cli可以快速生成項目結構，進行.vue單文件組件的編寫，使用 npm run build命令會從main...

izhuhaodev 2019-08-22 11:16 評論0 收藏0
靈活使用vue單文件組件之--最少配置打包.vue組件

摘要：但是，面對辣么多的配置文件，還是從開始自己來吧，畢竟我只想打包一個組件。這里想一下我們的需求，我們想要打包一個組件，使用，根據上面的說明，不難想到還應該需要一個可以用來識別并轉換文件，一句話，就是把按下面格式的編寫的組件轉換為模塊。對于vue單文件組件的使用，我們知道使用vue-cli可以快速生成項目結構，進行.vue單文件組件的編寫，使用 npm run build命令會從main...

Charles 2019-08-26 11:29 評論0 收藏0
淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...

rickchen 2019-08-22 18:29 評論0 收藏0
淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...

Backache 2019-08-22 18:29 評論0 收藏0
前端開發之走進Vue.js

摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。的新版本，的簡稱。的包管理工具，用于同一管理我們前端項目中需要用到的包插件工具命令等，便于開發和維護。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。本文旨在幫助大家認識Vue.js，了解Vue.js的開發流程，并進一步理解如何通...

zxhaaa 2019-08-20 15:20 評論0 收藏0