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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM