vue開發環境搭建及熱更新

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

1、cnpm的安裝

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

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

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

安裝完成以後，在命令行輸入

cnpm -v

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

2、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就會出現相似以下效果

這表示安裝成功！

3、建立一個基於「webpack」模板的項目

在命令行輸入

vue init webpack myDemo

myDemo是建立出來的文件名，輸入上面的命令以後，會出現

它會問你項目名等一些問題，根據你的須要輸入，弄完以後咱們就來安裝項目依賴。（ ps：project name不能使用駝峯寫法，要換爲橫槓）

4、安裝項目依賴

咱們在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文件夾， 裏面存放的是插件等的一些東西。

5、打包項目

在打包項目以前，咱們再次打開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文件夾，打包出來的文件就放在裏面。

6、在本地服務器上運行

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

cnpm run dev

Listening at http://localhost:8080表示 監聽的端口號爲8080（默認爲8080）。而後自動打開瀏覽器咱們就能夠看到效果啦

7、什麼是熱更新

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

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

 

8、一個問題

其實，不執行第五步的打包項目操做，直接運行項目也是有效果的。 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項目裏面的一些代碼。