用Webpack構(gòu)建Vue項(xiàng)目的實(shí)踐

最近在內(nèi)部項(xiàng)目中做了一些基于 vue + webpack 的嘗試，在小范圍和同事們探討之后，還是蠻多同學(xué)認(rèn)可和喜歡的，所以通過本篇文章分享給更多人

開始之前，需要安裝node環(huán)境。（安裝過程在此就不啰嗦了）

1、創(chuàng)建基本結(jié)構(gòu)首先我們要?jiǎng)?chuàng)建一個(gè)空文件夾（我這里叫todos，你可以隨便命名）作為項(xiàng)目的根目錄。創(chuàng)建一個(gè)沒有任何依賴關(guān)系的package.json，可以通過命令行 npm init 創(chuàng)建。

配置下基本信息即可。創(chuàng)建一個(gè)index.html文件，這個(gè)是顯示在瀏覽器中的頁(yè)面。

注意：1、這里的暫時(shí)并不存在；2、的數(shù)據(jù)會(huì)被vue文件填入。創(chuàng)建一個(gè)src文件夾，并在文件夾內(nèi)新建一個(gè)main.js文件：

這樣我們就完成了一個(gè)關(guān)于vuejs骨架，但是如何讓他運(yùn)行在瀏覽器中呢，這個(gè)時(shí)候我們就需要利用webpack打包成js文件了。

2、基本webpack構(gòu)建創(chuàng)建一個(gè)webpack.config.js的文件：

在命令行中安裝webpack：

安裝本地庫(kù)（作為dev dependencies）,需要在package.js中添加devDependencies的部分：

保存后運(yùn)行：npm install然后，vuejs庫(kù)安裝到你的dependencies中：

最后運(yùn)行webpack進(jìn)行打包：

3、vue-loader和.vue文件什么是vue-loader？vue-loader是webpack下loader插件，可以將.vue文件輸出成組件。創(chuàng)建一個(gè)文件夾叫component，并在文件夾內(nèi)新建一個(gè)app.vue文件，app.vue內(nèi)容如下：

然后修改main.js的代碼，如下：

重新運(yùn)行一下，我們看到有報(bào)錯(cuò)了：

webpack

不知道怎么去處理 .vue 的新語法。所以需要修改下webpack配置文件：

同時(shí)，在package.json加入一些庫(kù)：

新加庫(kù)以后，再重新npm install下載依賴包，然后重新打包一下：

重新刷新下瀏覽器就可以看到最新頁(yè)面了。4、熱模塊替代/熱更新熱模塊替代或熱更新是當(dāng)今最熱門新的技術(shù)。它讓你保存JavaScript文件，就把對(duì)應(yīng)的組件實(shí)時(shí)更新。首先，我們需要用webpack的dev server。修改你的devDependencies在package.json.

然后再命令窗口中執(zhí)行cnpm install。下載好依賴包后，再下載webpack-dev-server，執(zhí)行命令行cnpm install -g webpack-dev-server，然后把腳本加入到package.json中

運(yùn)行命令行 npm run dev：

這里看到有一大段內(nèi)容，我們要運(yùn)行http://localhost:8080/才能看到效果。在這里值得一提的是：之前我們?cè)趙ebpack.config.js里面是沒有設(shè)置publicPath的，但是如果使用webpack-dev-server，你會(huì)發(fā)現(xiàn)，這個(gè)不會(huì)有更新。我們來試驗(yàn)一下：在package.json文件中，將publicPath注釋掉：

app.vue代碼如下：

輸入命令npm run dev，在瀏覽器中顯示：

當(dāng)將頁(yè)面修改成：

刷新瀏覽器，顯示未變。此時(shí)，若將publicPath注釋取消，重新再輸入命令行，刷新瀏覽器，此時(shí)顯示更新：

且不需要重新輸命令行，修改代碼后，都會(huì)更新。這個(gè)時(shí)候你會(huì)發(fā)現(xiàn)：如果我們修改的時(shí)template里面的html，這個(gè)時(shí)候，瀏覽器會(huì)秒變，并不需要刷新瀏覽器，比如：

但是如果你是將data數(shù)據(jù)更新，就必須要刷新下瀏覽器才行。（在這個(gè)地方我花了差不多快半個(gè)小時(shí)的時(shí)候才知道這個(gè)情況，我以為是我的代碼寫得有問題，才發(fā)現(xiàn)，原來更新template不需要刷新，而更新里面的data是需要刷新的。至于為什么，我也不知道。）

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。