成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Charles / 823人閱讀

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

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

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

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

webpack

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

先建立一個(gè)文件夾：testproject;

命令行進(jìn)入到testproject ,運(yùn)行 npm init,根據(jù)命令行提示，進(jìn)行項(xiàng)目的一些初始化操作;

完成之后，我們的項(xiàng)目中就會(huì)有package.json文件，打開package.json，配置打包需要的一些dependence，這里我就是從一個(gè)vue-cli項(xiàng)目的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"
  }
}

運(yùn)行 npm install,稍等片刻，我們需要的模塊就ok了。
這里說明一下，npm包之間也存在依賴關(guān)系，如果存在有‘依賴的依賴’ 你沒有寫到配置的dependencies中，命令行會(huì)有提示，注意看。為什么說這個(gè)，因?yàn)槲以诳截愐蕾嚨臅r(shí)候，就略過了‘file-loader’，
so sad.^_^

現(xiàn)在可以寫我們的示例內(nèi)容了，這里我們?cè)O(shè)定我們要寫的組件為hello.vue，組件打包后的名字叫hellobundle.js,我們?cè)趕ayhello.html中要引用的組件就是打包后的hellobundle.js，直接在testproject目錄下新建相關(guān)文件，內(nèi)容如下：





  
  Title

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

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

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

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

寫好了.vue組件文件、webpack的配置文件，現(xiàn)在我們運(yùn)行npm run build, 結(jié)果如下：

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


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

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

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

其實(shí)在一開始的時(shí)候，我用的是webpack配置的hello變量，然后打開sayhello頁面時(shí)并沒有出現(xiàn)預(yù)期的效果，于是在控制臺(tái)打印了一下我們hellobundle.js輸出的hello變量：

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

結(jié)語

本著最簡(jiǎn)原則，示例中的項(xiàng)目結(jié)構(gòu)沒有按照src/dist這樣規(guī)范的目錄結(jié)構(gòu)來寫，寫到這一步之后，我們可以繼續(xù)深入完善我們的打包功能，對(duì)webpack使用命令行參數(shù)動(dòng)態(tài)打包文件、hot-reloading等，這樣的話，就又復(fù)雜了，不再贅述。--end 歡迎指正^_^

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107004.html

相關(guān)文章

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

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

    forrest23 評(píng)論0 收藏0

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

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

    izhuhaodev 評(píng)論0 收藏0

  • 淺談使用 Vue 構(gòu)建前端 10w+ 代碼量的單頁面應(yīng)用開發(fā)底層

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

    rickchen 評(píng)論0 收藏0

  • 淺談使用 Vue 構(gòu)建前端 10w+ 代碼量的單頁面應(yīng)用開發(fā)底層

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

    Backache 評(píng)論0 收藏0

  • 前端開發(fā)之走進(jìn)Vue.js

    摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。的新版本，的簡(jiǎn)稱。的包管理工具，用于同一管理我們前端項(xiàng)目中需要用到的包插件工具命令等，便于開發(fā)和維護(hù)。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。本文旨在幫助大家認(rèn)識(shí)Vue.js，了解Vue.js的開發(fā)流程，并進(jìn)一步理解如何通...

    zxhaaa 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<