前段時間一直在斷斷續續的看vue的官方文檔,后來就慢慢的學習搭建vue的開發環境,已經有將近兩周了,每到最后一步的時候就會報錯,搞的我好郁悶,擱置了好幾天,今天又接着搞vue的開發環境,終於成功了。我要把我所參考的文檔和實際遇到的問題分享給大家。由於本人也是初級菜鳥一枚,如果有錯誤,還望諒解指正。下面言歸正傳:
所參考的文檔鏈接:http://blog.csdn.net/syyling/article/details/52004892
http://www.cnblogs.com/ixxonline/p/6007885.html (i笑笑Online的博客)
http://www.cnblogs.com/ganmy/p/6029774.html
http://www.imooc.com/qadetail/184021?t=276040
前言,做項目的時候我用git比較多,所以我是首先安裝的git,他的右鍵git bash here定位比cmd的命令行要准確,接下來的命令都是利用git的git bash here。
1、首先,vue.js是一種前端框架,一般利用vue創建項目是要搭配webpack項目構建工具的,而webpack在執行打包壓縮的時候是依賴node.js的環境的,所以,要進行vue項目的開發,我們首先要安裝node.js。node.js的官方地址為:https://nodejs.org/en/download/,下載完畢,按照windows一般應用程序,一路next就可以安裝成功,建議不要安裝在系統盤(如C:)。
2、安裝完node之后,就要安裝cnpm,由於許多npm包都是在國外,安裝起來特別慢,所以我們這里利用淘寶的鏡像服務器,來對我們依賴的module進行安裝。
安裝命令為:npm install -g cnpm --registry=https://registry.npm.taobao.org 之后回車等待命令
3、接着安裝全局的vue-cli腳手架,用於幫助搭建所需的模板框架
命令為:cnpm install -g vue-cli,回車,等待安裝
安裝完后,可以輸入vue,然后回車,如果出現vue的信息,則說明安裝成功了。
4、緊接着,就該創建項目了,自己找一個合適的地方,新建一個項目文件夾,根據自己的需要命名,我的命名為 my-vue,然后,打開此文件夾,右鍵git bash here,定位到此文件夾,輸入:vue init webpack my-vue(項目文件夾名),回車,等待一小會兒,依次出現‘git’下的項,可按下圖操作:
此時,觀察my-vue的文件夾下又多了一個vue-test文件夾,這個就是vue項目的文件夾,如圖所示:
5.之后通過命令:cd vue-test 進入此文件夾,在利用命令:cnpm install,回車,等待一小會兒,回到項目文件夾,會發現項目結構里,多了一個node_modules文件夾(該文件里的內容就是之前安裝的依賴)。
6、在命令行里繼續輸入 cnpm run dev來測試環境是否搭建成功,如果出現如下圖說明成功了:
在瀏覽器里輸入localhost:8080就可以查看頁面如下:
但是,,,,一出現但是,就有可能是壞情況了,我到最后一步的時候,運行 cnpm run dev的時候,就出現了錯誤,錯誤信息類似下圖的信息:
,它提示npm應該更新到3.0.0版本,所以我從網上各種搜怎么更新npm的版本,關於版本更新的問題各有說法而且都不怎么起作用,依然是運行不成功,最終找到了一種辦法,按照之前安裝node 的相同的路徑,重新下載一個最新版本的node安裝,這個辦法簡單暴力。究其原因,是因為我將node的配置文件的registry配成了國內某鏡像,然而國內某鏡像未做到最新版本同步,仍保持在了4.4.7,而其對應的很多npm 安裝包也並非最新,所以導致安裝失敗, 無法找尋到某些包的最新版本。所以重新安裝是最好的解決辦法了。重新安裝完后,再運行cnpm run dev的時候就成功了。。至此,我的vue+webpack環境搭建終於大功告成了。