一、Node Js 環(huán)境搭建

1、Node.js是什么？

Node.js是一個(gè)基于Chrome V8引擎的[JavaScript運(yùn)行環(huán)境]。 Node.js使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式I/O 的模型。

Node.js是一個(gè)讓JavaScript運(yùn)行在服務(wù)端的開發(fā)平臺(tái)，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務(wù)端語言平起平坐的腳本語言 。

總的來說就是：nodeJS是JavaScript腳本語言的運(yùn)行環(huán)境。

  注意：

        Node.js-->JavaScript運(yùn)行環(huán)境，開發(fā)語言是：javascript
       J2EE   -->Java運(yùn)行環(huán)境， 開發(fā)語言是java
        Node.js v10.15.3文檔地址：http://nodejs.cn/api/

2、npm是什么？

 npm其實(shí)是Node.js的包管理工具（package manager），相當(dāng)于后臺(tái)的maven。

為啥我們需要一個(gè)包管理工具呢？因?yàn)槲覀冊(cè)贜ode.js上開發(fā)時(shí)，會(huì)用到很多別人寫的JavaScript代碼。 如果我們要使用別人寫的某個(gè)包，每次都根據(jù)名稱搜索一下官方網(wǎng)站，下載代碼，解壓，再使用，非常繁瑣。于是一個(gè)集中管理的工具應(yīng)運(yùn)而生：大家都把自己開發(fā)的模塊打包后放到npm官網(wǎng)上，如果要使用， 直接通過npm安裝就可以直接用，不用管代碼存在哪，應(yīng)該從哪下載。 更重要的是，如果我們要使用模塊A，而模塊A又依賴于模塊B，模塊B又依賴于模塊X和模塊Y， npm可以根據(jù)依賴關(guān)系，把所有依賴的包都下載下來并管理起來。否則，靠我們自己手動(dòng)管理，肯定既麻煩又容易出錯(cuò)。

3、環(huán)境搭建步驟:

第一步：

進(jìn)入官方網(wǎng)站：https://nodejs.org/en/ 

 我建議大家最好不要使用最新的版本，一般最新的版本會(huì)不太穩(wěn)定，我選擇的版本是node-v10.15.3的。

下載之后解壓一定要放在非中文目錄下?。。?！

第二步：

解壓nodeJS的解壓包，在根目錄下新增兩個(gè)文件夾node_global和node_cache 

第三步 ：

① 新增NODE_HOME  值為：D:\initPath\node-v10.15.3-win-x64    【這里放的是路徑】

注意：  一定要區(qū)分分號(hào)，保證是英文分號(hào)??！ 

② 修改Path并在最后添加：;%NODE_HOME%;%NODE_HOME%\node_global; 

如果系統(tǒng)版本不一樣的話，還可以這樣配置Path：

測試輸入    node -v

出現(xiàn)版本號(hào)則代表配置成功?。。。?！耶耶耶！ 

第四步： 配置npm的全局模塊的下載地址

(因?yàn)閚odejs運(yùn)行的環(huán)境這個(gè)平臺(tái)是國外的，那么里面的js肯定也是放在國外的，所以我們需要去改變這個(gè)源。)

設(shè)置緩存目錄

設(shè)置全局變量

加快npm下載js依賴的速度

【注意：這里面放的路徑是根據(jù)自己的根目錄存放的，doc命令運(yùn)行需要一行一行的運(yùn)行】

        npm config set cache "F:\Software path\node-v10.15.3-win-x64\node_cache"
        npm config set prefix "F:\Software path\node-v10.15.3-win-x64\node_global"
        npm config set registry https://registry.npm.taobao.org/

doc命令運(yùn)行 之后，去到本機(jī)賬號(hào)，找到.npmrc文件，點(diǎn)擊查看是否還有以上這三行腳本，有則代表成功，反之則需要重新來過，如圖所示： 

第五步： 下載github的Vue的項(xiàng)目解壓

驗(yàn)證安裝結(jié)果：版本驗(yàn)證 輸入 npm -v

顯示版本號(hào)則代表安裝成功。

第六步：

 進(jìn)入到項(xiàng)目里來

 現(xiàn)在就開始下載啦~

第七步： 在通過npm run dev 啟動(dòng)項(xiàng)目

緊接著在第六步的基礎(chǔ)上進(jìn)行 

加載之后：

 完了之后就會(huì)彈出頁面

登錄進(jìn)去就會(huì)出現(xiàn)這個(gè)頁面啦~

環(huán)境搭建成功~~~ 

二、Element簡介

官方網(wǎng)址：Element - The world's most popular Vue UI framework 

 Element有兩種開發(fā)模式，一種是傳統(tǒng)開發(fā)模式，另一種是前后端分離開發(fā)模式。

知識(shí)總結(jié)

安裝步驟：

1、下載nodeJS的安裝包

2、解壓nodeJS的解壓包，在根目錄下新增兩個(gè)文件夾node_global和node_cache

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

        NODE_HOME:配置的是nodeJS解壓的根路徑F:\Software path\node-v10.15.3-win-x64
        Path:%NODE_HOME%;%NODE_HOME%\node_global

        檢驗(yàn)是否配置成功：node -v

4、配置npm的全局模塊的下載地址
 

        npm config set cache "F:\Software path\node-v10.15.3-win-x64\node_cache"
        npm config set prefix "F:\Software path\node-v10.15.3-win-x64\node_global"
        npm config set registry https://registry.npm.taobao.org/

        檢驗(yàn)是否配置成功：本機(jī)用戶找到.npmrc文件,查看是否有以上三行腳本

5、下載github的Vue的項(xiàng)目解壓

        檢驗(yàn)是否安裝成功：npm -v

6、在解壓的項(xiàng)目中是沒有node_modules的，在工程的根目錄下需要通過doc命令npm install進(jìn)行再次依賴下載（package.json）

7、在通過npm run dev 啟動(dòng)項(xiàng)目

總結(jié)

到此這篇關(guān)于Node.Js環(huán)境搭建步驟記錄的文章就介紹到這了,更多相關(guān)Node.Js環(huán)境搭建步驟內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論