在說明之前,溶解得在這說一句 ,菜鳥開始安裝這些東西真是不容易,各種瘋狂的百度,搜索。(找的我眼淚都快流下來了),不說廢話,開始正經。
第一步:環境的搭建 :
vue推薦開發環境:
Node.js: javascript運行環境(runtime),不同系統直接運行各種編程語言(https://nodejs.org/zh-cn/download/)
npm: Nodejs下的包管理器。由於國內使用npm會很慢,這里推薦使用淘寶NPM鏡像(http://npm.taobao.org/)
有anguler經驗的 so easy(吃個瓜冷靜一下)。
node.js安裝好之后呢 ,檢查一下版本順便看看是否已經安裝成功。
win+R,輸入cmd,接着輸入node -v檢測是否安裝成功,順便再輸入npm-v 查看npm包管理器版本號。
如上圖所示,您已經安裝成功。
安裝cnpm
在命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待,安裝完成如下圖。
完成之后,我們就可以用cnpm代替npm來安裝依賴包了。如果想進一步了解cnpm的,查看淘寶npm鏡像官網。
環境搭建好之后,開始安裝vue啦
安裝vue-cli腳手架構建工具
在命令行中運行命令npm install -g vue-cli,然后等待安裝完成。通過以上三部,我們需要准備的環境和工具都准備好了,接下來就開始使用vue-cli來構建項目。
用vue-cli構建項目
要創建項目,首先我們要選定目錄,然后再命令行中把目錄轉到選定的目錄。在這里,我選擇桌面來存放新建的項目,則我們需要先把目錄cd到桌面,如下圖。
在桌面目錄下,在命令行中運行命令vue init webpack firstVue。解釋一下這個命令,這個命令的意思是初始化一個項目,其中webpack是構建工具,
也就是整個項目是基於webpack的。其中firstVue是整個項目文件夾的名稱,這個文件夾會自動生成在你指定的目錄中(我的實例中,會在桌面生成該文件夾),如下圖。(看 的懂就不錯了)
運行初始化命令的時候回讓用戶輸入幾個基本的選項,如項目名稱,描述,作者等信息,如果不想填直接回車默認就好。
ok,之后再查看你的桌面 ,哦耶寺 !桌面上就有剛剛新建的項目了。
以為這樣就結束了 ,
騷年 太天真了。再重新win+r →cmd→ cd 項目文件夾→運行命令cnpm install,等待安裝。
要安裝依賴包,首先cd到項目文件夾(firstVue文件夾),然后
安裝完成之后,會在我們的項目目錄firstVue文件夾中多出一個node_modules文件夾,這里邊就是我們項目需要的依賴包資源。
東西比較多。。用webstorm 的朋友就要小心了 ,全新的webstorm 要配置的東西多着嘞。
接着 就該運行我們的項目了。
在項目目錄中,運行命令npm run dev,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果。(nice)
↓
切記這個運行的窗口,在使用的時候,別關了,關了就GG了 。
待溶解找到新出路,再斃了它(已安裝tomat之類的朋友,那就不一樣,嘿嘿)
項目運行成功后,瀏覽器會自動打開localhost:8080(如果瀏覽器沒有自動打開,可以手動輸入)。運行成功后,會看到如下所示的界面。
完事了,看到上圖,表示整成了 。
本次服務到此結束!對本次服務,請評論一下選項:
A:完美,B:不能再完,C:巨完美,D:NICE
有問題,歡迎討論討論,來討論者,送5斤狗糧。。。。。。