vscode搭建vue環(huán)境完整圖文教程(適合新手小白)
本文記錄一下在vscode上搭建vue環(huán)境的過(guò)程，新手小白想和大家一起學(xué)習(xí)討論~
一、安裝nodejs
官網(wǎng)鏈接：nodejs官網(wǎng)
根據(jù)個(gè)人電腦型號(hào)顯示進(jìn)行下載，安裝時(shí)注意指定安裝路徑，然后一直選擇next即可。
二、配置環(huán)境變量
1.在nodejs安裝目錄下新建node_cache（nodejs緩存）、node_global（全局包存放）兩個(gè)文件夾，如下圖所示。
2. 打開(kāi)cmd命令提示符，配置文件路徑如下：
3. 配置環(huán)境變量
系統(tǒng)屬性->高級(jí)->環(huán)境變量->新增環(huán)境變量：
結(jié)果如下所示：
三、vscode中搭建vue環(huán)境
1. 安裝插件：①ESLint，用于統(tǒng)一JavaScript代碼風(fēng)格的工具。②
2. 在vscode終端中輸入以下命令：
npm i -g @vue/cli
若報(bào)錯(cuò)為
npm : 無(wú)法將“npm”項(xiàng)識(shí)別為 cmdlet、函數(shù)、腳本文件或可運(yùn)行程的名稱(chēng)...
可關(guān)閉vscode，選擇以管理員身份再次打開(kāi)，或者檢查環(huán)境變量是否配置正確。
安裝webpack：js打包工具
npm install -g webpack
檢查node、npm和vue的版本
node -v npm -v vue -V
注意vue -V，若報(bào)錯(cuò)為
vue : 無(wú)法加載文件 D:\nodejs\node_global\vue.ps1，因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本...
先以管理員身份運(yùn)行vscode，終端輸入以下指令：
get-ExecutionPolicy set-ExecutionPolicy RemoteSigned get-ExecutionPolicy vue -V
3. 創(chuàng)建vue項(xiàng)目：
demo為vue項(xiàng)目名，終端輸入命令：
vue init webpack demo
若出現(xiàn)：
按照提示輸入：neo4j_echarts>npm i -g @vue/cli-init
然后重新輸入vue init webpack demo
出現(xiàn)以下選項(xiàng)，直接輸入enter鍵即可
出現(xiàn)以下提示：
輸入以上兩個(gè)命令，最后結(jié)果為
點(diǎn)擊該鏈接即完成項(xiàng)目創(chuàng)建：
四、處理報(bào)錯(cuò)
運(yùn)行vue文件時(shí)報(bào)錯(cuò)
Virtual script not found, may missing <script lang="ts"> / "allowJs": true / jsconfig.json.
解決方法：在項(xiàng)目目錄下創(chuàng)建 jsconfig.json 配置文件，其中設(shè)置 “allowJs”: true：
{
"compilerOptions": {
"allowJs": true,
}
}
總結(jié)
到此這篇關(guān)于vscode搭建vue環(huán)境的文章就介紹到這了,更多相關(guān)vscode搭建vue環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue自定義過(guò)濾器格式化數(shù)字三位加一逗號(hào)實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue自定義過(guò)濾器格式化數(shù)字三位加一逗號(hào)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-03
vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值)
這篇文章主要介紹了vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法
這篇文章主要介紹了vite2.x實(shí)現(xiàn)按需加載ant-design-vue@next組件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)防抖的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了vue-cropper實(shí)現(xiàn)裁剪圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了Vue之定義全局工具類(lèi)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
基于vue+openlayer實(shí)現(xiàn)地圖聚合和撒點(diǎn)效果
Openlayers 是一個(gè)模塊化、高性能并且功能豐富的WebGIS客戶(hù)端的JavaScript包，用于顯示地圖及空間數(shù)據(jù)，并與之進(jìn)行交互，具有靈活的擴(kuò)展機(jī)制，本文給大家介紹vue+openlayer實(shí)現(xiàn)地圖聚合效果和撒點(diǎn)效果，感興趣的朋友一起看看吧2021-09-09
vue實(shí)現(xiàn)自定義樹(shù)形組件的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)自定義樹(shù)形組件的示例代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
Vue使用Print.js打印div方式(選中區(qū)域的html)
這篇文章主要介紹了Vue使用Print.js打印div方式(選中區(qū)域的html),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09