1. 程式人生 > 實用技巧 >Vue環境搭建&Vue-cli腳手架3.0前後版本切換方法

Vue環境搭建&Vue-cli腳手架3.0前後版本切換方法

Vue環境搭建

步驟概括:

(1) 下載安裝node.js

(2) 設定node的全域性和快取路徑

(3) 安裝淘寶映象

(4) 設定環境變數

(5) 安裝Vue

(6) 安裝Vue-cli腳手架

(7) 建立一個Vue專案

附:

Vue-cli腳手架3.0前後版本切換方法

1、下載安裝node.js

下載地址:

官網:https://nodejs.org/en/

中文網(下載快,推薦使用):http://nodejs.cn/download/

可點選阿里雲映象

https://npm.taobao.org/mirrors/node/v14.15.4/

可在該地址後面修改想要下載的版本號,然後選擇32或64位的.msi檔案下載:

下載後安裝:

修改安裝位置:

按照預設即可,

繼續下一步,不用勾選:

2、設定node的全域性和快取路徑

在node.js的安裝路徑下,新建node_global和node_cache兩個資料夾

按Win+R,進入cmd控制檯:

設定快取路徑(路徑為快取資料夾的路徑):

npm config set cache "E:\InstallationPosition\work\nodejs\node_cache"

設定全域性模組的存放路徑:

npm config set prefix "E:\InstallationPosition\work\nodejs\node_global"

設定成功後,以後要安裝XXX模組,用命令npm install XXX -g,就會放在全域性模組的路徑裡

3、安裝淘寶映象(基於 Node.js 安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完成

4、設定環境變數

設定環境變數的目的是在任何目錄都可以執行node和vue命令。

(1)新增Path路徑(全域性資料夾路徑)“E:\InstallationPosition\work\nodejs\node_global”

進入環境變數介面,雙擊下面的Path,

點選新建,將全域性資料夾的路徑複製進來,點選確定:

(2)新增系統變數NODE_PATH

5、安裝Vue

一定要確定將上面的設定環境變數的視窗點選確定並關閉,並且需要先關上命令列視窗,再次開啟cmd,執行下面的安裝Vue命令,才可正常執行:

cnpm install vue -g (此處使用的是上面安裝的淘寶映象cnpm命令)

6、安裝Vue-cli腳手架

7、建立一個Vue專案

自己在某個位置新建一個資料夾,用來存放vue專案:

例如:

關閉命令列視窗再次開啟,進入到剛才新建資料夾的路徑下:

在當前目錄下輸入“vue init webpack-simple 專案名稱(使用英文)”。

注意專案名不能包含大寫字母:

cd test

npm install

執行:

cnpm run dev

===========================================================================

Vue-cli腳手架3.0前後版本切換方法:

(一)3.0以下--->3.0以上

(1) 先解除安裝vue3.0之前的

npm uninstall -g vue-cli

當前版本:

解除安裝:

(2) 安裝3.0之後的

npm install -g @vue/cli

(3) 安裝中若出錯執行下面的三個命令進行更新

npm i npm -g 更新npm

npm i @vue/cli -g 更新3.0之後的版本

cnpm i @vue/cli -g 更新淘寶映象的版本

即可。

升級之後:

(二)3.0以上--->3.0以下

即uninstall和install的兩個內容互換。

參考連結:https://www.bilibili.com/video/BV1bv411v7ye/?p=2