vue開發環境搭建及熱更新

寫這篇博客的目的是讓廣大的學者在初入Vue項目的時候少走些彎路，雖然現在有很多博客也有差不多的內容，但是博主在里面添加了一些學習時碰到的小問題。在閱讀這篇博客之前，我先給大家推薦一篇文章《入門Webpack，看這篇就夠了》（網址：http://www.jianshu.com/p/42e11515c10f），看完這篇文章，相信大家對於webpack包管理工具會有一個新的認識。

一、cnpm的安裝

npm是node的包管理工具，由於npm是基於國外的服務器，所以有些電腦運行起來比較慢，在這里我們選擇使用淘寶的npm鏡像cnpm。

用管理員身份打開cmd（之所以用管理員身份，是防止有些電腦的安裝需要管理者身份），輸入一下命令行

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完成之后，在命令行輸入

cnpm -v

查看cnpm的版本號，如果出現版本號如4.2.0，則表示安裝成功！

二、vue-cli的安裝

vue-cli是Vue的腳手架工具，我們在安裝它之前，在命令行輸入vue，是找不到命令的，會輸出command not found：vue（可以試試看）。接下來我們來安裝它了

我們先在桌面建立一個文件夾Demo_1，然后在cmd進入目錄

cd C:\Users\ASUS\Desktop\Demo_1

然后再輸入

cnpm install -g vue-cli

-g表示全局安裝，去掉-g表示在當前目錄下安裝。安裝完之后，輸入vue就會出現類似如下效果

這表示安裝成功！

三、創建一個基於“webpack”模板的項目

在命令行輸入

vue init webpack myDemo

myDemo是創建出來的文件名，輸入上面的命令之后，會出現

它會問你項目名等一些問題，根據你的需要輸入，弄完之后我們就來安裝項目依賴。（ ps：project name不能使用駝峰寫法，要換為橫杠）

四、安裝項目依賴

我們在cmd先進入myDemo目錄下

cd C:\Users\ASUS\Desktop\Demo_1\myDemo

在該目錄下執行

cnpm install

這句命令行會把所有項目依賴安裝到當前目錄下，為什么可以直接這么使用呢？
我們來看一下myDemo文件夾里面的package.json文件，里面有一段這樣的代碼

這兩個是我們剛剛下載的webpack模板里面的項目依賴，我們cnpm install命令行的執行，就直接把這些東西都安裝了，不用像前面推薦的文章里面一樣，每個插件的安裝都要執行類似下面的命令

npm install --save-dev json-loader

json-loader這個插件的功能是分析JSON文件並把它轉換為JavaScript文件。
好了，回到正題，安裝完項目依賴之后。我們會發現在文件夾myDemo里面多了一個node_modules文件夾， 里面存放的是插件等的一些東西。

五、打包項目

在打包項目之前，我們再次打開package.json文件，里面有這樣一段代碼

這段代碼，每個鍵對應着一個值，通俗點的意思就是 cnpm run什么鍵，就執行后面的語句，比如cnpm run build，就是執行node build/dev-server.js文件，對項目進行打包。

在打包之前我們來看一下myDemo目錄下的東西

我們在命令行輸入

cnpm run build

打包完成之后，是如下效果

我們可以看到打包出來了好多文件， Asset表示這次打包出來的文件，Size是指這個文件的大小，Chunks是指這次打包的分塊，Chunk Names是指這次打包的塊名稱。名稱采用的是 [name].[hash]的命名方法。（ 關於webpack的知識我推薦大家去慕課網找《webpack深入與實戰》，這個老師講的非常清楚，這里就不再多說）

接下來我們回去看myDemo文件夾，我們會發現 多了一個dist文件夾，打包出來的文件就放在里面。

六、在本地服務器上運行

接下來就是最后一步了，我們通過下面這句代碼將這個項目在本地服務器上跑起來。

cnpm run dev

Listening at http://localhost:8080表示 監聽的端口號為8080（默認為8080）。然后自動打開瀏覽器我們就可以看到效果啦

七、什么是熱更新

熱更新這個功能是我們第二步的時候，vue-cli手腳架的一個功能，通俗點講，它的作用就是 當編程人員在修改代碼的時候，瀏覽器不用手動刷新就可以直接看到修改后的效果，大大提高了速度。我們來試驗一下。我們找到myDemo/src/component/下的Hello.vue文件，我們修改一點東西，在Welcome to Your Vue.js App之前加上個No。

保存一下，在瀏覽器不用手動刷新就可以看到效果啦！

 

八、一個問題

其實，不執行第五步的打包項目操作，直接運行項目也是有效果的。 cnpm run dev也會進行打包，但是結果是在內存中的，你是看不到的，你運行cnpm run build才能在文件夾中看到，也就是那個dist文件夾，如何證明cnpm run dev打包后的東西是放在內存中呢？我們在瀏覽器F12

只執行cnpm run dev的情況下，我們會發現index.html中導入了app.js，但是在本地文件夾里面卻怎么也找不到這個app.js文件，而執行了cnpm run build之后，app.js就放在dist文件夾中， 不推薦只執行cnpm run dev。

《Vue開發環境搭建及熱更新》就先說這么多，接下來第二篇《理解最基本的Vue項目》將會講解一下Vue項目里面的一些代碼。