怎麼在vscode上運行vue項目

在vscode上執行vue專案的方法：1、用vue-cli腳手架搭建空vue專案；2、開啟VSCode下載vetur插件；3、下載安裝eslint外掛；4、開啟vue專案並利用git進行專案迭代即可。

本文操作環境：Windows7系統、vue2.5.17版，DELL G3電腦

怎麼在vscode上執行vue專案？

前言

以前都是用webstorm编写前端代码，最近开始尝试使用VSCode来写，目前还是有些懵逼的，一步步将使用流程写下来便于之后自己再次配置。

具體流程：

1：首先還是需要我們利用vue-cli腳手架搭建空vue項目，這個我就不贅述了

2：打開VSCode下載vetur插件

點擊左側圈起來的圖標打開拓展插件，在頂部搜尋框搜尋vetur外掛程式進行下載安裝即可。
下載安裝完後就會在擴充清單那看到，例如我的是0.29.1版本的
之後需要開啟setting.json檔案進行設定：

 "emmet.syntaxProfiles": {
       "vue-html":"html",
       "vue":"html"
   },

#3：下載eslint插件的安裝，它是一款智能錯誤檢測插件

點擊左側圈起來的圖標打開拓展插件，在頂部搜尋框搜尋eslint插件進行下載安裝即可。
下載安裝完後就會在擴充清單那看到，例如我的是2.1.13版本的
之後需要開啟setting.json檔案進行設定：

"eslint.validate": [
      "javascript",
       "gavesciptreact",
       "html",
       "vue"
   ],
   "eslint.options": {
       "plugins":["html"]
   },

#4：開啟我們第一步建置的空vue專案

在終端機輸入：npm install，先下載對應的依賴。
最後輸入：npm start，執行專案：

在瀏覽器開啟對應位址看到如圖所示表示執行成功：

#5：利用git進行專案迭代

這個具體可看VSCode如何使用git

推薦學習：《vue教學》

以上是怎麼在vscode上運行vue項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！