文章目錄
-
-
- 準備工作
- 安裝vue
- 搭建demo
-
準備工作
1、安裝node.js，相當于vue項目的運作環境。選擇自己電腦合适版本，直接下載下傳安裝（注意下載下傳長期支援版）。程式裡包含npm，安裝後即可執行npm指令。
不用謝我：node.js官網下載下傳位址.
2、打開指令行，檢查是否安裝成功
輸入：node -v 檢視node版本
輸入：npm -v 檢視npm版本
如下圖說明安裝成功：
安裝vue
1，使用npm前，修改為淘寶鏡像，類似于maven修改鏡像，國内的下載下傳會快很多
a,指令行輸入：npm config set registry https://registry.npm.taobao.org 語句執行完ok了
b,檢視是否修改成功語句： npm config get registry
下圖所示即為修改成功
2，使用npm指令安裝vue
a,安裝vue
指令行執行： npm install vue -g這裡的-g 是指安裝到全局目錄中
b,安裝vue-router （vue官方路由管理器）
指令行執行：npm install vue-router -g
c,安裝vue-cli （vue腳手架，快速搭建項目）
指令行執行： npm install vue-cli -g
下載下傳可能會有點慢，耐心等待！沒有網絡原因，基本都是正常安裝
檢視下vue版本： vue -V（注意V是大寫）
如上說明安裝成功
搭建demo
vue安裝成功，終于可以建立第一個項目了！
1，在本地建立項目目錄（我是在F盤下建了project檔案夾），指令行cd 進入項目目錄
2，兩種方式搭建vue項目，第一種指令行執行語句搭建；第二種使用vue UI 指令打開圖形化界面搭建。這裡介紹第一種，第二種大家可以自己嘗試下，指令行直接輸入 vue UI 回車，會在浏覽器打開頁面，跟着頁面提示操作就行。兩種原理相同，都是選擇其他依賴和配置，第二種對于使用者更友好。
a，指令行執行： vue init webpack vuedemo （webpack是官方推薦的标準模闆名，vue3.x之後使用vue create vuedemo 會更加友善，這裡使用的是标準模闆）
這個提示我暫時也不清楚什麼原因，希望有人在評論區解答，萬分感謝。按照提示執行指令，安裝完成後再次執行vue init webpack vuedemo
圖中說盡量别用的依賴是個文法檢測工具，對于新手很不友好，如果你多一個空格，可能項目就啟動不起來。其餘按照自己愛好，y or n 自己選擇就行。
項目建立成功，啟動項目
提示建立成功，可以通路網址檢視
浏覽器通路看到此界面，說明項目正常啟動，可以用編輯器打開撸代碼了！
如果新手學習，可以到慕課網或者B站上搜尋相關視訊，進行學習。
文末福利，vue的谷歌開發插件下載下傳位址：Vue Devtools. 安裝方法網站描述的也很詳細。
創作不易，給個贊吧