Vue CLI 3 使用步驟

1 安裝前提

已安裝Node.js 8.9 或更高版本 。

2 全局安裝Vue CLI 3

桌面"shift" + “鼠標右鍵” 打開鼠標菜單,然後點擊‘在此處打開命令窗口’
在這裏插入圖片描述
在命令窗口輸入

npm install -g @vue/cli

在這裏插入圖片描述
回車後會自動執行一坨代碼,等它把代碼吐完

在命令窗口查看vue當前版本

vue -V

在這裏插入圖片描述
啊哈,安裝成功 (✧◡✧),現在關掉命令行窗口

3 到項目預裝目錄下搭建vue項目

在預構建項目目錄下"shift" + “鼠標右鍵”,點擊‘在此處打開命令窗口’
在這裏插入圖片描述
在命令行工具中輸入

vue create vue-demo1

在這裏插入圖片描述
回車後,按鍵盤向下鍵,空格鍵選到–手動配置
在這裏插入圖片描述
回車後,按鍵盤向下鍵,空格鍵選擇所需配置(這裏就隨便選了  ̄ω ̄ )
在這裏插入圖片描述
回車
在這裏插入圖片描述
這裏輸入

Y

回車
在這裏插入圖片描述
這裏個人建議選Stylus處理器,Css的 : {} ; 都省了,爽歪歪( • ̀ω•́ )✧
回車
在這裏插入圖片描述
這裏選ESLint標準的代碼規範就可以了,統一標準規範,大家好纔是真的好
回車
在這裏插入圖片描述
這裏選在保存時進行檢查,方便及時糾正超規範代碼
回車
在這裏插入圖片描述
這裏選擇將各自的文件配置放在各自的配置文件中,方便以後查找修改配置
回車
在這裏插入圖片描述
這裏看個人喜好,
選Y,則會要你再輸入一個配置的名字(例:lujianming),然後在你每次創建新項目時,即每次輸入“vue create XXX”後,會多出一個之前選好的配置:lujianming(babel,eslint)
選N,這直接跳過
回車,就會自動出現一坨又一坨的代碼,等它代碼吐完,項目就構建成功了(๑╹◡╹)ノ"""
在這裏插入圖片描述
我們按它提示
輸入cd vue-demo1,切換路徑到
在這裏插入圖片描述
然後再輸入npm run serve,啓動前端服務器
在這裏插入圖片描述
我們打開Google Chrome瀏覽器,在地址欄輸入"http://localhost:8080/ "
在這裏插入圖片描述
啊,interesting ٩(๑>◡<๑)۶ 。
如果文章對您有所幫助,可以將網頁收藏到瀏覽器收藏夾,方便以後用到來翻,當然我就是這麼幹的。然後,點贊,關注,謝謝。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章