天天看點

前端開發環境(nvm、node、cnpm、yarn)安裝

目錄

1、NVM安裝

2、NodeJs安裝

NPM介紹

3、CNPM安裝

4、YARN安裝

5、VUE全局安裝

目前市面上前端開發都不可避免的依賴node進行開發,但是不同項目運用的node開發版本不同,協同開發上會遇到許多不相容的問題,是以這裡介紹一下前端開發環境的部署流程。

1、NVM安裝

nvm是一個node版本控制工具,可以安裝不同版本的nodejs開發,而不影響到另一個項目的開發環境,有點類似于git開發的分支管理,安裝位址:

https://github.com/coreybutler/nvm-windows/releases

前端開發環境(nvm、node、cnpm、yarn)安裝

這裡說明一下,安裝nvm之前,先解除安裝本地nodejs,避免造成沖突,解除安裝前建立記事本記錄本地項目目前依賴的各種主流架構版本,比如node,npm,cnpm,yarn,vue等等,這樣安裝完nvm後,可以快速還原到你目前的項目開發運作環境

安裝完後,在本地指令行視窗檢視是否安裝成功

前端開發環境(nvm、node、cnpm、yarn)安裝

,安裝完後,檢視網絡可安裝的node版本

nvm list available
           
前端開發環境(nvm、node、cnpm、yarn)安裝

nvm安裝node的指令

nvm install 版本号,比如

nvm install 12.16.2
           

2、NodeJs安裝

檢視本地nodejs有哪些版本,以及所用node,可以使用指令

nvm ls

前端開發環境(nvm、node、cnpm、yarn)安裝

或者node -v

前端開發環境(nvm、node、cnpm、yarn)安裝

如果需要解除安裝node版本的話

nvm uninstall 版本号

NPM介紹

npm是nodejs的包管理工具,是以安裝node後,本地都會有一個npm的版本,但是項目開發時,使用npm安裝依賴時會很慢,因為有許多依賴檔案的安裝位址與本地網絡相距甚遠,是以需要安裝淘寶鏡像或者yarn,

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

3、CNPM安裝

檢視cnpm安裝是否成功

cnpm -v

前端開發環境(nvm、node、cnpm、yarn)安裝

4、YARN安裝

npm install -g yarn

檢視版本:

yarn --version

Yarn 淘寶源安裝,分别複制粘貼以下代碼行到指令号視窗運作即可

yarn config set registry https://registry.npm.taobao.org -g

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

5、VUE全局安裝

我這裡是安裝一個vue3.0的測試開發環境,是以我的vue安裝指令是

cnpm install -g @vue/[email protected]
           

若你不是的話,則安裝vue3.0前的vue腳手架

cnpm install -g @vue/[email protected]
           

後面的@3.x.x是cli腳手架的版本号,你也可以不寫,那麼将會安裝最新的vue-cli腳手架,目前最新的是4.x

的版本,安裝最新的cli腳手架是支援vue3的,這是官方的介紹說明

前端開發環境(nvm、node、cnpm、yarn)安裝