天天看點

安裝VUE-cli後輸入vue -V不是内部指令

安裝好vue-cli後輸入vue -V不是内部指令一般是配置環境的問題,這個問題整整困擾了我兩天我才找問題(vue小白一枚),寫出來更多是為了讓一些學習者明白是哪裡出了問題

閑話少說,進入正題,先來一整套vue的環境搭建

安裝vue先安裝nodejs

node下載下傳位址:https://nodejs.org/en/建議在64位作業系統上安裝x64版本,因為對于很多nodejs的包來講,基本都支援64位作業系統,未來部署環境也基本都是x64作業系統

安裝步驟我就不多說了 下一步就可以跟安裝JDK一個道理

安裝VUE-cli後輸入vue -V不是内部指令

Node.js runtime表示運作環境

npm package manager表示npm包管理器

online documentation shortcuts線上文檔快捷方式

Add to PATH添加到環境變量

選擇Node.js runtime即可

我看網上好多有配置環境變量的,我的安裝後直接環境變量就已經自動配置了(不知道是版本越來越高的原因嘛),是以這裡我沒有配置環境變量的,如果安裝好沒有配置環境變量的話需要去手動配置一下,把nodejs的路徑放在path環境變量即可

安裝後win+R打開cmd輸入node -v可檢視版本npm -v可檢視npm版本

安裝VUE-cli後輸入vue -V不是内部指令

至此nodejs是安裝完成了,預設情況下我們下載下傳全局包時路徑是為預設的 可以通過npm root -g可以進行檢視路徑

安裝VUE-cli後輸入vue -V不是内部指令

我這裡是修改過後的路徑,如果不修改預設應該是在C:\Users\Administrator\AppData\Roaming\npm\node_modules下

但是有時候我們不想讓全局包放在這裡,我們想放在node的安裝目錄下

1、在node安裝目錄下下建立兩個檔案夾

node_global全局包下載下傳存放

node_cachenode緩存

2、修改路徑

在CMD視窗執行以下兩條指令:

npm configsetprefix"C:\node\node_global"

npm config set cache "C:\node\node_cache"

或者在nodejs的安裝目錄中找到node_modules\npm\.npmrc檔案,修改如下:

prefix =C:\node\node_global

cache = C:\node\node_cache

安裝VUE-cli後輸入vue -V不是内部指令

接下來我們說安裝完nodejs後安裝vue,搭建vue環境變量呢需要先下載下傳vue-cli,vue-cli是從頭搭建vue工程的腳手架(也就是工具),通過該工具,可以簡化很多工程搭建的配置環境

我們通過輸入指令行進行安裝

安裝VUE-cli後輸入vue -V不是内部指令

安裝如果沒有出現erro都是WARN的話那麼就是順利安裝完成的

安裝完成後輸入vue -V可以檢視版本号(注意V是大寫)

安裝VUE-cli後輸入vue -V不是内部指令

如果提示vue不是内部指令的話 那麼找到你全局包路徑,例如我的是E盤

安裝VUE-cli後輸入vue -V不是内部指令

把這個路徑配置到path環境變量即可

接着我們來建立vue項目

安裝VUE-cli後輸入vue -V不是内部指令
安裝VUE-cli後輸入vue -V不是内部指令

這裡如果怕麻煩選擇預設就是直接回車就好了,如果想改配置選擇紅框中的就可以了,我們直接選擇預設的進行建立項目

項目建立完成後我們看一下生成的項目都有什麼檔案

安裝VUE-cli後輸入vue -V不是内部指令

這是我們生成的項目檔案

如何運作項目,通過指令進入項目目錄 輸入 npm run server就可以(這裡可能會報錯)

安裝VUE-cli後輸入vue -V不是内部指令

我們運作的時候出錯了,可以根據報錯提示script 我們打開package.json看看參數是否出錯

安裝VUE-cli後輸入vue -V不是内部指令

這裡看是沒有什麼問題 我們把server改成dev也是一種啟動方式 将參數進行修改

指令行再輸入 npm run dev進行啟動

安裝VUE-cli後輸入vue -V不是内部指令

這裡我們啟動成功了!我們輸入網址看看

安裝VUE-cli後輸入vue -V不是内部指令

以上就是我安裝vue的一些心得 可做技術交流

繼續閱讀