vscode如何搭建vue項目

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

2、全局安裝vue-cli，vue-cli可以幫助我們快速構建Vue項目。

安裝命令：

npm?install?-g?vue-cli

打開vscode的終端，調(diào)出命令輸入框。點擊終端-新建終端，輸入上述命令，回車，等待安裝完成。

立即學習“前端免費學習筆記（深入）”；

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

安裝命令：

npm?install?-g?webpack

安裝方法同上。

4、安裝完成之后就可以開始創(chuàng)建vue項目，首先創(chuàng)建一個文件夾用來存放你的項目，用vscode打開對應的文件夾，并在終端cd到對應的文件夾。比如我的文件夾就是myvue

創(chuàng)建項目命令，輸入回車:

vue?init?webpack?myvue

其中myvue就是項目名稱，根據(jù)喜好自己取。

接著會出現(xiàn)一些配置項，可以根據(jù)需要配置，也可以默認，直接按回車。

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

5、接著運行項目，先cd到項目文件夾，cd myvue，然后輸入以下指令

npm?run?dev

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

6、項目打包發(fā)布上線

輸入命令：

npm?run?build

完成之后，項目文件夾中會出現(xiàn)一個dist文件夾，里面就是打包之后的內(nèi)容，直接部署就好了。

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

以上就是