vuejs啟動專案的方法:1、安裝node.js;2、安裝「@vue/cli」;3、使用「vue create 專案名稱」指令建立一個專案;4、使用cd指令進入vue專案目錄中;5、執行「npm run serve」指令啟動專案。
![vuejs開發如何啟動專案](https://img.php.cn/upload/article/000/000/024/6141a98e3b6b4773.jpg)
本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。
前提條件:安裝node.js
啟動vue專案
- 如果想要啟動vue項目,有兩種方式,第一種使用@vue/cli,第二種使用webpack從零開始搭建Vue專案;如果你是新手的話,建議你使用@vue/cli這個工具,cli是封裝了webnpack的loader與plugin,能夠使你快速啟動vue專案;我以下就是使用的@vue/cli;
- 進入官網https://cli.vuejs.org/zh/
- 安裝@vue /cli
npm install -g @vue/cli
- 檢視@vue/cli版本號碼
vue --version
-
vue create hello-world
建立一個專案
![163169274481219vuejs開發如何啟動專案 vuejs開發如何啟動專案](https://img.php.cn/upload/image/824/945/580/163169274481219vuejs%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E5%95%9F%E5%8B%95%E5%B0%88%E6%A1%88)
選擇手動選擇
![163169275873689vuejs開發如何啟動專案 vuejs開發如何啟動專案](https://img.php.cn/upload/image/146/910/956/163169275873689vuejs%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E5%95%9F%E5%8B%95%E5%B0%88%E6%A1%88)
##選擇babel ,css pre-processors,linter,unit testing,選擇後按回車
![163169276436910vuejs開發如何啟動專案 vuejs開發如何啟動專案](https://img.php.cn/upload/image/613/360/721/163169276436910vuejs%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E5%95%9F%E5%8B%95%E5%B0%88%E6%A1%88)
![163169277022182vuejs開發如何啟動專案 vuejs開發如何啟動專案](https://img.php.cn/upload/image/968/451/958/163169277022182vuejs%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E5%95%9F%E5%8B%95%E5%B0%88%E6%A1%88)
![163169277587913vuejs開發如何啟動專案 vuejs開發如何啟動專案](https://img.php.cn/upload/image/587/852/569/163169277587913vuejs%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E5%95%9F%E5%8B%95%E5%B0%88%E6%A1%88)
![163169278049428vuejs開發如何啟動專案 vuejs開發如何啟動專案](https://img.php.cn/upload/image/694/585/570/163169278049428vuejs%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E5%95%9F%E5%8B%95%E5%B0%88%E6%A1%88)
![163169278581393vuejs開發如何啟動專案 vuejs開發如何啟動專案](https://img.php.cn/upload/image/864/961/392/163169278581393vuejs%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E5%95%9F%E5%8B%95%E5%B0%88%E6%A1%88)
![163169281539682vuejs開發如何啟動專案 vuejs開發如何啟動專案](https://img.php.cn/upload/image/797/645/481/163169281539682vuejs%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E5%95%9F%E5%8B%95%E5%B0%88%E6%A1%88)
![163169282271832vuejs開發如何啟動專案 vuejs開發如何啟動專案](https://img.php.cn/upload/image/781/517/761/163169282271832vuejs%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E5%95%9F%E5%8B%95%E5%B0%88%E6%A1%88)
![163169282724035vuejs開發如何啟動專案 vuejs開發如何啟動專案](https://img.php.cn/upload/image/276/119/320/163169282724035vuejs%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E5%95%9F%E5%8B%95%E5%B0%88%E6%A1%88)
![163169284078483vuejs開發如何啟動專案 1vuejs開發如何啟動專案](https://img.php.cn/upload/image/519/176/713/163169284078483vuejs%E9%96%8B%E7%99%BC%E5%A6%82%E4%BD%95%E5%95%9F%E5%8B%95%E5%B0%88%E6%A1%88)
#################################################################################### ###cd hello-world $ npm run serve### 輸入此指令######################開啟http://localhost:8080/ 出現下列頁面,說明建立並啟動專案成功##################相關推薦:《###vue.js教學###》###
以上是vuejs開發如何啟動專案的詳細內容。更多資訊請關注PHP中文網其他相關文章!