其實之前對vue的話也有過一段時間的學習，博客園也是寫了5篇vue的學習筆記。但是一直是通過CDN的方式在html文件頭部引入vue.js，然后實例化vue對象綁定Dom，寫組件寫方法。就算是在實際項目中也是以這樣的方式，沒有通過自動化工具來構建vue項目的經驗。
新公司的項目是基於vue開發的，用到前端自動化工具，雖說沒做過此類項目，但是對於node、webpack這些，之前自己也是玩兒過的，所以上手的話也是很快的，在這里就先簡要地記錄一下node構建vue項目的步驟吧（包含遇到的坑）。
溫馨提示：我用的是cmder，不是系統自帶的cmd。
一、准備工作
開始的話，下載node（可能需要手動配node環境變量），然后在下載的node根文件夾下通過npm安裝webpack、vue-cli（vue腳手架工具），為求方便，這兩個最好全局安裝（-g）；
二、構建vue項目
假設你已經完成了如上步驟，那么接下來，還是在node根目錄下，一條命令創建vue項目：
上述n個問題，直接略過，直接回車，然后你的node根目錄下回多出一個vue-pro（你自己起的項目名）文件夾，並且會自動下載項目依賴包。
三、項目跑起來
下完依賴之后，我們cd命令到項目文件夾下，並且啟動項目：
然后通過webpack的編譯，你就可以在瀏覽器訪問你的項目了：
你也可以直接ctrl點擊上述地址，直接訪問項目，效果如下：
四、打包
寫vue項目的時候，因為使用了自動化工具的緣故，文件看起來非常非常多，像下面這樣：
涉及到很多的配置，看起來很讓人頭大，有組件、路由、入口文件、es6->es5、依賴包管理等等，但是，打包之后，就會出現熟悉的身影（這里有坑，先別急）：
打包完畢，項目目錄下會多出一個名為dist（名字可以自己配置的，默認配置名為dist）的文件夾，打開之后你會發現：
static文件夾下，就是images、js、css等靜態資源文件，此時你雙擊index.html
五、打包的路徑問題
雙擊之后，你會發現瀏覽器一片空白，驚喜不驚喜？刺激不刺激？哈哈哈哈！！！
F12一看，一堆錯誤，404，那就大概知道了，是打包時候的路徑出錯了，於是我們找到項目下的一個配置文件看看：
其實，問題就是出在這里了，絕對路徑的話，打包之后自然從絕對路徑找了，文件在C盤他就從C盤對應目錄找，所以自然是找不到的，所以這里應當將"/"改成"./"，這樣就是相對於當前目錄了，文件夾怎么移動都沒事，依舊找得到！
