Node.js npm基礎安裝配置&建立第一個VUE項目

使用以前，咱們先來明白這幾個東西是用來幹什麼的。

• node.js: 一種javascript的運行環境，可以使得javascript脫離瀏覽器運行。
  Node.js的出現，使得先後端使用同一種語言，統一模型的夢想得以實現。
• npm: Nodejs下的包管理器。
• webpack: 它主要的用途是經過CommonJS的語法把全部瀏覽器端須要發佈的靜態資源作相應的準備，好比資源的合併和打包。
• vue-cli: 用戶生成Vue工程模板。（幫你快速開始一個vue的項目，也就是給你一套vue的結構，包含基礎的依賴庫，只須要 npm install就能夠安裝）

---

第一步，安裝nodejs

nodejs中文網:http://nodejs.cn/

下載後安裝，路徑推薦更改在盤根目錄。
( 這裏由於個人另外一個磁盤分區裝了其餘OS，只剩C盤了，若是你有其餘盤推薦放到其餘盤裏 )

默認會自動添加到path環境變量

最後完成安裝。

 

安裝完成  查看變量和版本

使用Cmd命令（Windows鍵+R）

• 查看環境變量 : echo %PATH%
• 查看Node版本: node -v
• 查看npm版本: npm -v

第二步，更改默認模塊和緩存目錄

剛安裝後，nmp本地倉庫文件夾生成在用戶目錄，並非說NodeJS和NPM安裝好了到這裏就能直接使用了，這也是新手常常犯的一個錯誤之一。由於默認狀況下，NPM安裝的模塊並不會安裝到NodeJS的程序目錄。而是安裝到系統用戶組路徑下的文件夾，若是不修改npm的模塊安裝目錄，那麼它默認狀況下都會安裝到這裏，隨着你測試開發各類不一樣的項目，安裝的模塊愈來愈多，那麼這個文件夾的體積會愈來愈大，直到佔滿你的C盤。這就是爲何要修改npm的配置的緣由。。

由於博主電腦就一個盤了，只能安裝到C盤，給你們演示下安裝C盤自定義路徑。（其餘盤方法同）

我打算把這兩個路徑換到安裝nodejs的目錄，C:\nodejs

在C:\nodejs新建兩個文件夾

• node_global
• node_cache
• § 這兩個文件夾是全局模塊目錄和緩存目錄

 

而後運行如下2條命令（後邊的是路徑，根據本身實際狀況修改）

• npm config set prefix "C:\nodejs\node_global"
• npm config set cache "C:\nodejs\node_cache"

查看npm的本地倉庫路徑:

命令:  npm list -global

更改前:

更改後:

第三步、接下來配置鏡像站

配置淘寶鏡像站:

命令: npm config set registry=http://registry.npm.taobao.org

檢查鏡像站是否配置成功: npm config get registry

• 國內鏡像站，速度更快，加速安裝。

第四步、查看配置文件 （安裝可忽略）

輸入命令 npm config list 顯示全部配置信息，會生成一個配置文件

生成的配置文件路徑 C:\Users\Administrator\.npmrc

使用文本編輯器編輯它，能夠看到剛纔的配置信息（只是讓你看到修改，so安裝可忽略這一步）

 

第五步、安裝npm

安裝npm : npm install npm -g

默認的模塊C:\nodejs\node_modules 目錄
將會改變爲C:\nodejs\node_global\node_modules 目錄，
若是直接運行npm install等命令會報錯的。

咱們須要修改系統變量

增長環境變量NODE_PATH 內容是：C:\nodejs\node_global\node_modules

（而後，須要從新打開CMD讓上面的環境變量生效）

第六步、npm安裝vue.js

命令：npm install vue -g

• 這裏的 -g 是指安裝到global全局目錄去

安裝 vue-router

命令： npm install vue-router -g

• vue-router 是專爲 Vue.js 開發的便於實現單頁應用的工具庫，可以以聲明式的方法編寫頁面的導航和跳轉信息。

安裝  vue腳手架

命令：  npm install vue-cli -g

⊗ 由於vue腳本在自定義的global目錄下，不在path環境變量。咱們須要去系統變量裏添加。

• 對path環境變量添加 C:\nodejs\node_global
• ⊕注意: win10如下版本的，橫向顯示PATH的，注意添加到最後時，不要有分號【;】

(修改path後須要從新打開cmd 纔會上邊更改的變量生效)

測試vue是否可用

命令：vue -V

• 出現版本號即配置正確  注意-V  V是大寫的

第七步、vue配置完成後，配置第一個項目

vue-cli工具是內置了模板包括 webpack 和 webpack-simple

這裏我選擇建立內置webpack項目到 C盤的nodejs文件夾下  （可根據本身路徑選擇）

建立一個webpack項目

即首先cd到要安裝的路徑（可根據本身路徑選擇）

命令: cd C:\nodejs

建立webpack項目:  vue init webpack vue01

初始化，安裝依賴

• 進入項目: cd C:\nodejs\vue01
• 安裝依賴: npm install
• 運行項目: npm run dev

成功界面，提示打開地址http://localhost:8080

打包生成項目（編譯成已構建文件）

命令: npm run build

最終結果生成在 dist 文件夾

NMP下新建出來的vue01的目錄描述：

 

原文連接:鑽芒博客

Node.js npm基礎安裝配置&建立第一個VUE項目

https://www.zmki.cn/4985.html