本文記錄一下在vscode上搭建vue環(huán)境的過程，新手小白想和大家一起學習討論~

一、安裝nodejs

官網(wǎng)鏈接：nodejs官網(wǎng)

根據(jù)個人電腦型號顯示進行下載，安裝時注意指定安裝路徑，然后一直選擇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代碼風格的工具。②

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)文章希望大家以后多多支持腳本之家！

最新評論