在使用之前，先了解下基礎(chǔ)定義：

npm:  nodejs 下的包管理器。

webpack: 它主要用途是通過CommonJS 的語法把所有瀏覽器端需要發(fā)布的靜態(tài)資源作相應(yīng)的準(zhǔn)備，比如資源的合并和打包。

vue-cli: 用戶生成Vue工程模板。（幫你快速開始一個(gè)vue的項(xiàng)目，也就是給你一套vue的結(jié)構(gòu)，包含基礎(chǔ)的依賴庫，只需要npm install 就可以安裝。

一.node.js下載安裝

1.nodejs下載網(wǎng)址：

Node.js    

由于安裝教程比較簡單,以下只提供圖文攻略

 注意:選擇安裝路徑,選擇自己習(xí)慣的安裝目錄即可,但是要記錄安裝地址

2、對應(yīng)的各個(gè)文件的作用：

3、安裝檢測：

命令: win+R cmd

         echo %PATH%         //查看環(huán)境變量

         node -v                     //查看安裝node的版本

         npm -v                      //查看npm 的版本    

4:補(bǔ)全安裝文件

新建 node_cache , node_global 兩個(gè)文件在安裝目錄下 先如下圖建立2個(gè)目錄：

4.1運(yùn)行以下2條命令,修改目錄

 npm config set prefix "D:\nodejs\node_global"  
 npm config set cache  "D:\nodejs\node_cache"
 npm list -global         //查看目錄是否已修改

4.2配置鏡像站，提升速度

命令: npm config set registry=http://registry.npm.taobao.org    //配置鏡像網(wǎng)站

         npm config list //顯示所以配置信息

4.3 檢查鏡像站配置

命令: npm config get registry  //檢測配置鏡像

         npm  info vue //查看是否能獲取 vue 信息

         npm list -global //查看 global 目錄

注意，此時(shí)，默認(rèn)的模塊D:\nodejs\node_modules 目錄

將會改變?yōu)镈:\nodejs\node_global\node_modules 目錄，

如果直接運(yùn)行npm install等命令會報(bào)錯(cuò)的。

二 、配置環(huán)境變量  

1、增加環(huán)境變量

內(nèi)容: D:\nodejs\node_global\node_modules //配置在 NODE_PATH

注意，一下操作需要重新打開CMD讓上面的環(huán)境變量生效）

2、測試NPM安裝vue.js

命令：npm install vue -g

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

3.測試NPM安裝vue-router

命令：npm install vue-router -g

4. 安裝vue腳手架

命令: npm install vue-cli -g

5.編輯環(huán)境編輯path

內(nèi)容: D:\nodejs\node_global //配置環(huán)境變量path

注意添加到最后時(shí)，不要有分號【;】

6.重新測試vue是否使用正常

注意: vue-cli工具是內(nèi)置了模板包括 webpack 和 webpack-simple,前者是比較復(fù)雜專業(yè)的項(xiàng)目，他的配置并不全放在根目錄下的 webpack.config.js 中

7.初始化，安裝依賴

命令: npm install

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

生成靜態(tài)文件，打開dist文件夾下新生成的index.html文件

附加: nmp新建的目錄描述：

總結(jié)

到此這篇關(guān)于windows系統(tǒng)下安裝npm(Node.js)的文章就介紹到這了,更多相關(guān)windows安裝npm(Node.js)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論