Visual Studio 2019 建立初始Vue項目

科普(抖機靈):
Nodejs與Vue的關係
Nodejs:Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境,其意義相當於java的jvm一樣,提供了一個環境
Vue:尤大大(有名人物)建立的一套用於構建用戶界面的漸進式JavaScript框架.基於node上運行

一 、運行環境安裝(Node安裝)
安裝:Vue項目一切基於Node.js,so 必須先安裝NodeJS,附下載地址
https://nodejs.org/zh-cn/download/

版本檢查:安裝完畢之後,win鍵+R,輸入cmd

查看一下是否真成功了cmd裏面直接輸入:

node -v 和 npm -v 得到如下圖版本類似的信息證明裝好了。
Alt

二、新建Vue項目
我的vue項目是由Visual Studio 2019搭建,所以教程是帶你用VS2019的哦,雖然市面上大部分是VsCode搭建,但我們之前項目也是基於VS2019的所以直接還是用了一樣的,畢竟用熟了比較快,而且VS2019這麼強大,啥都能寫。

1)確認Visual Studio 2019環境:看擴展工具裏有沒有勾選NodeJs

Alt

Alt

2)確保沒毛病就開始建項目 :左上角——文件——新建——項目——輸入自己的項目名,選好準備存哪,妥了
Alt
Alt

3)右鍵項目名:選擇“在此處打開命令提示符” 運行npm的指令 npm install -g(這個指令會把你項目缺失的組件包全部補全,可以記個小本本),然後結束後再運行指令npm run serve(這是開發環境調試用的指令,能夠在修改頁面後自動刷新同步網頁,記小本本)
Alt
Alt
PS:此處 npm install -g指令可能會安裝失敗,需要查看npm下的組件包是否會出現缺失情況(此情況會導致運行npm run serve 時報錯,提示某些指令不存在等),可使用npm install -g vue-cli

4)如果上面一切順利的話,你就可以Hello World了

按他的提示打開瀏覽器輸入localhost:8080(一般是這個地址,如果被佔用了他會自動切8081等,所以最終你還是看他提示)

注意:如果有腳手架(Vue-cli)報錯,那運行一下這個npm install -g vue-cli

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章