寫這篇博客的目的是讓廣大的學者在初入Vue項目的時候少走些彎路，雖然現在有很多博客也有差不多的內容，但是博主在裡面添加了一些學習時碰到的小問題。在閱讀這篇博客之前，我先給大家推薦一篇文章《入門Webpack，看這篇就夠了》（網址：http://www.jianshu.com/p/42e11515c1 ...
寫這篇博客的目的是讓廣大的學者在初入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 myDemomyDemo是創建出來的文件名，輸入上面的命令之後，會出現
它會問你項目名等一些問題，根據你的需要輸入，弄完之後我們就來安裝項目依賴。（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-loaderjson-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項目裡面的一些代碼。
