手把手教你安裝配置node.js

先來了解一下三個概念:

1.npm: Nodejs下的包管理器。

2.webpack: 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發佈的靜態資源做相應的準備,比如資源的合併和打包。

3.vue-cli: 用戶生成Vue工程模板。(幫你快速開始一個vue的項目,也就是給你一套vue的結構,包含基礎的依賴庫,只需要 npm install就可以安裝)

01準備工作

  1. 下載node.js(https://nodejs.org/zh-cn/)

2.安裝node.js

一路next

點擊finish完成

3.查看安裝目錄

02配置安裝三件套

1.打開cmd查看是否正常

2.在node.js的目錄下新建兩個文件夾,如下圖所示:

3.運行以下2條命令

npm config set prefix "D:\nodejs\node_global"npm config set cache "D:\nodejs\node_cache"

4.配置一個鏡像站

npm list -global  --查看本地倉庫

 

輸入命令,配置鏡像站

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

輸入命令顯示所有配置信息

npm config list

查找並打開C:\Users\Lianjs\.npmrc

使用文本編輯器可以查看它

檢查一下鏡像站行不行命令1

npm config get registry

檢查一下鏡像站行不行命令2

Npm info vue --看看能否獲得vue的信息

5.配置環境變量

增加環境變量NODE_PATH 內容是:D:\nodejs\node_global\node_modules

6.測試NPM安裝vue.js,這裏的-g是指安裝到global全局目錄去

npm install vue -g

7.測試NPM安裝vue-router

npm install vue-router -g

8.安裝vue腳手架

npm install vue-cli -g

9.編輯環境編輯path

10.對path環境變量添加D:\nodejs\node_global

win10以下版本的,橫向顯示PATH的,注意添加到最後時,不要有分號【;】

 

11.重新打開CMD,並且測試vue是否使用正常

注意,vue-cli工具是內置了模板包括 webpack 和 webpack-simple,前者是比較複雜專業的項目,

他的配置並不全放在根目錄下的 webpack.config.js 中。

 

初始化,安裝依賴

運行npm install安裝依賴

  •  
npm run dev

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

自動打開瀏覽器http://localhost:8080/#/

  •  
npm run build

生成靜態文件,打開dist文件夾下新生成的index.html文件,nmp下新建出來的vue01的目錄描述: 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章