手把手搭建Vue項目-完整步驟

🍒環境準備

1、安裝node.js

• 下載下傳位址：Node.js
• 界面展示

 2、檢查node.js版本

• 檢視版本的兩種方式

  1|node -v

  2|node -version

• 出現版本号則說明安裝成功（最新的以官網為準）

  

 3、為了提高效率，可以使用淘寶的鏡像源

• 輸入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安裝npm鏡像源
• 以後再用到npm的地方直接用cnpm來代替就好了，因為沒有鏡像源的話，安裝速度比較慢

檢查是否安裝成功：

cnpm -v

 🍒搭建Vue環境

1、全局安裝vue-cli

• 這裡注意：安裝vue-cli對node.js的版本是有要求的，這個後面會給小夥伴分享哦~

•   安裝裝的兩種方式：輸入cmd指令

1|npm install -g @vue/cli //這個是從國外下載下傳的比較慢

  2|cnpm install -g @vue/cli //這個是從鏡像源下載下傳

• 檢視安裝的版本（顯示版本号說明安裝成功）

        1|vue --version

• 如果你原來有版本或者版本比較低，可以更新

  1|npm update -g @vue/cli

  2|yarn global upgrade --latest @vue/cli

🍒搭建Vue環境

 1、用cmd指令建立項目

 1.1建立檔案

•  以管理者身份打開指令行界面，進入任意一個想要建立項目的檔案夾

        輸入：

vue create vue01

 1.2選擇配置資訊

•  通過上下方向鍵選擇對應配置，然後回車

• 按空格鍵選擇要安裝的配置資源，帶 * 号說明被選上了

1.3選擇版本

•  上下方向鍵選擇版本，這裡我們選擇vue2，然後回車

1.4路徑模式選擇

•  這裡可以不用管，直接輸入 no/n

1.5文法代碼格式檢查

 代碼檢查，選标準的就行，方向鍵切換，空格鍵選擇然後回車

• 代碼檢查時間，方向鍵切換，空格鍵選擇然後回車

1.6第三方檔案存在的方式  

1.7是否儲存本次配置資訊（儲存預設）

• 這裡如果選擇儲存的話，就要輸入名字，預設就是檔案夾的名字，下次配置的時候就會顯示這個檔案配置的選項就像上面的一樣，在配置的時候會多出來一個

1.8建立成功

•  Successfully created project vue01出現這個說明建立成功

1.9運作

•  cd到項目檔案夾下面

        cd vue01

• 輸入代碼運作檔案

        npm run serve

1.10啟動

• 在浏覽器輸入對應的網址就可以看到界面啦

http://localhost:8080/

1.11停止服務 

兩下Ctrl+C 或者Ctrl+C一下然後Y