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