1、提前將Vscode、nodejs等安裝好。

2、全域性安裝vue-cli，vue-cli可以幫助我們快速構建Vue專案。

安裝命令：

1

npm install -g vue-cli

開啟VScode的終端，調出命令輸入框。點選終端-新建終端，輸入上述命令，回車，等待安裝完成。



3、安裝webpack，它是打包js的工具

安裝命令：

1

npm install -g webpack

安裝方法同上。

4、安裝完成之後就可以開始建立vue專案，首先建立一個資料夾用來存放你的專案，用vscode開啟對應的資料夾，並在終端cd到對應的資料夾。比如我的資料夾就是myvue

建立專案命令，輸入回車:

1

vue init webpack myvue

其中myvue就是專案名稱，根據喜好自己取。



接著會出現一些配置項，可以根據需要配置，也可以預設，直接按回車。



然後繼續等待安裝依賴項。完成之後，一個基本的 vue專案就搭建完了。完成之後的vscode左邊可以看到如下目錄，其中main.js就是入口。



5、接著執行專案，先cd到專案資料夾，cd myvue，然後輸入以下指令

1

npm run dev



成功之後，接著在瀏覽器裡輸入:http://localhost:8080，看到如下畫面就是成功了。



6、專案打包釋出上線

輸入命令：

1

npm run build

完成之後，專案資料夾中會出現一個dist資料夾，裡面就是打包之後的內容，直接部署就好了。

相關文章教程推薦：vscode教程

以上就是vscode如何搭建vue專案的詳細內容，更多請關注php中文網其它相關文章！