開始之前，需要安裝node環境。（安裝過程在此就不啰嗦了）
1、創建基本結構
首先我們要創建一個空文件夾（我這里叫todos，你可以隨便命名）作為項目的根目錄。
創建一個沒有任何依賴關系的package.json，可以通過命令行 npm init 創建。
配置下基本信息即可。
創建一個index.html文件，這個是顯示在瀏覽器中的頁面。
注意：
1、這里的暫時並不存在；
2、的數據會被vue文件填入。
創建一個src文件夾，並在文件夾內新建一個main.js文件：
這樣我們就完成了一個關於vuejs骨架，但是如何讓他運行在瀏覽器中呢，這個時候我們就需要利用webpack打包成js文件了。
2、基本webpack構建
創建一個webpack.config.js的文件：
在命令行中安裝webpack：
安裝本地庫（作為dev dependencies）,需要在package.js中添加devDependencies的部分：
保存后運行：npm install
然后，vuejs庫安裝到你的dependencies中：
最后運行webpack進行打包：
3、vue-loader和.vue文件
什么是vue-loader？
vue-loader是webpack下loader插件，可以將.vue文件輸出成組件。
創建一個文件夾叫component，並在文件夾內新建一個app.vue文件，app.vue內容如下：
然后修改main.js的代碼，如下：
重新運行一下，我們看到有報錯了：
webpack不知道怎么去處理 .vue 的新語法。所以需要修改下webpack配置文件：
同時，在package.json加入一些庫：
新加庫以后，再重新npm install下載依賴包，然后重新打包一下：
重新刷新下瀏覽器就可以看到最新頁面了。
4、熱模塊替代/熱更新
熱模塊替代或熱更新是當今最熱門新的技術。它讓你保存JavaScript文件，就把對應的組件實時更新。
首先，我們需要用webpack的dev server。修改你的devDependencies在package.json.
然后再命令窗口中執行cnpm install。
下載好依賴包后，再下載webpack-dev-server，執行命令行cnpm install -g webpack-dev-server，然后把腳本加入到package.json中
運行命令行 npm run dev：
這里看到有一大段內容，我們要運行
http://localhost:8080/才能看到效果。
在這里值得一提的是：
之前我們在webpack.config.js里面是沒有設置publicPath的，但是如果使用webpack-dev-server，你會發現，這個不會有更新。
我們來試驗一下：
在package.json文件中，將publicPath注釋掉：
app.vue代碼如下：
輸入命令npm run dev，在瀏覽器中顯示：
當將頁面修改成：
刷新瀏覽器，顯示未變。
此時，若將publicPath注釋取消，重新再輸入命令行，刷新瀏覽器，此時顯示更新：
且不需要重新輸命令行，修改代碼后，都會更新。
這個時候你會發現：
如果我們修改的時template里面的html，這個時候，瀏覽器會秒變，並不需要刷新瀏覽器，比如：
但是如果你是將data數據更新，就必須要刷新下瀏覽器才行。（在這個地方我花了差不多快半個小時的時候才知道這個情況，我以為是我的代碼寫得有問題，才發現，原來更新template不需要刷新，而更新里面的data是需要刷新的。至於為什么，我也不知道。）
