您的位置:首頁技術文章
文章詳情頁

Visual Studio 2019配置vue項目的圖文教程詳解

瀏覽:2日期:2023-01-30 18:02:37

一,環境安裝

1:Vue項目一切基于Node.js,必須先安裝NodeJS, 下載地址:https://nodejs.org/zh-cn/

Visual Studio 2019配置vue項目的圖文教程詳解

Visual Studio 2019配置vue項目的圖文教程詳解

安裝nodejs,一路next就行了

Visual Studio 2019配置vue項目的圖文教程詳解

Additonal工具可以不用安裝。

Visual Studio 2019配置vue項目的圖文教程詳解

win+r 輸入cmd

Visual Studio 2019配置vue項目的圖文教程詳解

輸入 node -v 和 npm -v 得到版本信息證明裝好了。

Visual Studio 2019配置vue項目的圖文教程詳解

2:確認Visual Studio 2019環境:看擴展工具里有沒有勾選NodeJs

Visual Studio 2019配置vue項目的圖文教程詳解

Visual Studio 2019配置vue項目的圖文教程詳解

二,使用VS2019 創建Vue項目

后期會新增多個vue的項目,所以建議加一個vue名稱 方案管理文件

Visual Studio 2019配置vue項目的圖文教程詳解

Visual Studio 2019配置vue項目的圖文教程詳解

你要是熟悉typescript 可以選 第一二個

項目名字可以默認

Visual Studio 2019配置vue項目的圖文教程詳解

項目目錄結構大致如下圖

Visual Studio 2019配置vue項目的圖文教程詳解

右鍵項目名:選擇“在此處打開命令提示符”

Visual Studio 2019配置vue項目的圖文教程詳解

運行npm的指令 npm install -g(這個指令會把你項目缺失的組件包全部補全)。

Visual Studio 2019配置vue項目的圖文教程詳解

然后結束后再運行指令npm run serve(這是開發環境調試用的指令,能夠在修改頁面后自動刷新同步網頁)

Visual Studio 2019配置vue項目的圖文教程詳解

瀏覽器地址 輸入 http://localhost:8081/ 可訪問到

Visual Studio 2019配置vue項目的圖文教程詳解

總結

到此這篇關于Visual Studio 2019配置vue項目的圖文教程詳解的文章就介紹到這了,更多相關Visual Studio 2019配置vue項目內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
国产综合久久一区二区三区