安裝Node.js

成都創(chuàng)新互聯(lián)公司是專業(yè)的太谷網(wǎng)站建設(shè)公司，太谷接單;提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行太谷網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

1，下載安裝包并安裝

    https://nodejs.org/en/download/

2，查看node和npm的版本信息

3，查看和更新包安裝路徑

--查看 

• npm config get prefix

• npm config get cache

--更新

• npm config set prefix"E:\nodejs-repository\npm_global"

• npm config set cache "E:\nodejs-repository\npm_cache"

   修改環(huán)境變量PATH和NODE_PATH（可選，以分號分割的絕對路徑）

    --修改PATH,對應(yīng)項改為：E:\nodejs-repository\npm_global

    --新建NODE_PATH，設(shè)置值：E:\nodejs-repository\npm_global\node_modules

提示：NODE_PATH是歷史遺留下來的一個路徑解決方案，通常不應(yīng)該使用，而應(yīng)該使用node_modules目錄機(jī)制。在其他位置找不到指定模塊時，Node會去這些路徑查找。

附：require命令加載規(guī)則

require命令用于加載文件，后綴名默認(rèn)為.js

根據(jù)參數(shù)的不同格式，require命令去不同路徑尋找模塊文件。

（1）如果參數(shù)字符串以“/”開頭，則表示加載的是一個位于絕對路徑的模塊文件。比如，require('/home/marco/foo.js')將加載/home/marco/foo.js。

（2）如果參數(shù)字符串以“./”開頭，則表示加載的是一個位于相對路徑（跟當(dāng)前執(zhí)行腳本的位置相比）的模塊文件。比如，require('./circle')將加載當(dāng)前腳本同一目錄的circle.js。

（3）如果參數(shù)字符串不以“./“或”/“開頭，則表示加載的是一個默認(rèn)提供的核心模塊（位于Node的系統(tǒng)安裝目錄中），或者一個位于各級node_modules目錄的已安裝模塊（全局安裝或局部安裝）。

舉例來說，腳本/home/user/projects/foo.js執(zhí)行了require('bar.js')命令，Node會依次搜索以下文件。

這樣設(shè)計的目的是，使得不同的模塊可以將所依賴的模塊本地化。

（4）如果參數(shù)字符串不以“./“或”/“開頭，而且是一個路徑，比如require('example-module/path/to/file')，則將先找到example-module的位置，然后再以它為參數(shù)，找到后續(xù)路徑。

（5）如果指定的模塊文件沒有發(fā)現(xiàn)，Node會嘗試為文件名添加.js、.json、.node后，再去搜索。.js件會以文本格式的JavaScript腳本文件解析，.json文件會以JSON格式的文本文件解析，.node文件會以編譯后的二進(jìn)制文件解析。

（6）如果想得到require命令加載的確切文件名，使用require.resolve()方法

目錄的加載規(guī)則

通常，我們會把相關(guān)的文件會放在一個目錄里面，便于組織。這時，最好為該目錄設(shè)置一個入口文件，讓require方法可以通過這個入口文件，加載整個目錄。

在目錄中放置一個package.json文件，并且將入口文件寫入main字段。下面是一個例子。

require發(fā)現(xiàn)參數(shù)字符串指向一個目錄以后，會自動查看該目錄的package.json文件，然后加載main字段指定的入口文件。如果package.json文件沒有main字段，或者根本就沒有package.json文件，則會加載該目錄下的index.js文件或index.node文件。

參考鏈接：http://javascript.ruanyifeng.com/nodejs/module.html

4，設(shè)置淘寶鏡像

5，更新npm

還可以通過以下地址獲取npm的模塊

https://registry.npmjs.org/npm/-/npm-{VERSION}.tgz

提示：npm install 指令會在當(dāng)前路徑下創(chuàng)建node_modules目錄，并將下載的包存入到該目錄下。

          如果當(dāng)前路徑下沒有package.json文件，則會下載最新版本的模塊。

附：創(chuàng)建package.json文件來管理本地模塊

package.json文件中最少要具備以下兩個信息：

1，name

  全小寫、不能有空格，下劃線和破折號是允許的。

2,version

  格式：x.x.x

例如：

    {

      "name": "my-awesome-package",

      "version": "1.0.0"

    }

3，使用npm init來創(chuàng)建package.json文件

該指令會提醒你輸入信息，但還可以使用以下命令在不提示的情況下直接創(chuàng)建package.json

• npm init --yes 

• npm init -y

4，使用指令往package.json文件中添加依賴

    {

      "name": "my_package",

      "version": "1.0.0",

      "dependencies": {

            "my_dep": "^1.0.0"

      },

      "devDependencies" : {

            "my_test_framework": "^3.1.0"

      }

    }

• npm install --save

• npm install --save-dev

• npm uninstall --save 

• npm uninstall --save-dev

5，更新本地包

    在package.json所在路徑下執(zhí)行npm update

安裝“本機(jī)編譯插件模塊”

有三個最主要的原因使得你應(yīng)該安裝該模塊

1，你有一個現(xiàn)成的c++類庫想在nodejs應(yīng)用中使用

2，你有興趣通過c++來編寫一些性能優(yōu)異的代碼

3，運行的時候遇到可怕的“node-gyp”問題并且也不知道發(fā)生了什么事的時候

安裝node-gyp的依賴環(huán)境

1，安裝VC++編譯環(huán)境

    安裝方式一：使用管理員權(quán)限打開cmd，執(zhí)行以下命令【W(wǎng)indows 下編譯 Node 的 C++ 模塊】

    安裝方式二：

        1，下載Visual C++ Build Tools（http://landinghub.visualstudio.com/visual-cpp-build-tools），并使用默認(rèn)選項安裝 或者 下載安裝Visual Studio 2015(或者免費的vc++ express)，在安裝的過程中選擇“Common Tools for Visual C++”安裝即可。

           注意：win7及以上操作系統(tǒng)需要.NET Framework 4.5.1的支持。

        2，安裝Python2.7（v3.x.x不支持），并添加到PATH路徑下，同時運行以下命令來設(shè)置默認(rèn)的python

    或

使用npm來安裝python的過程中，可以使用“--pythond=2.7”來指定版本。

        3，啟動cmd，執(zhí)行以下命令

驗證：任意安裝以下一個包以測試環(huán)境是否正確

• bson

• bufferutil

• kerberos

• node-sass

• sqlite3

• phantomjs

• utf-8-validate

安裝后可以執(zhí)行該命令試試：npm install gulp-p_w_picpath

安裝node-gyp

執(zhí)行以下命令完成安裝

 如果系統(tǒng)上安裝有多個版本的Python，可以按照以下的方式配置：

   --確定要使用的Python版本，執(zhí)行以下指令設(shè)置“--python”變量：

   --如果node-gyp通過npm的方式調(diào)用，那么你可以修改npm的python配置項

手動使用方式(編譯本地插件)：

安裝Angular-cli

1，執(zhí)行以下指令安裝Angular-cli

2，創(chuàng)建Angular應(yīng)用

3，進(jìn)入my-app下，啟動應(yīng)用

4，訪問

    http://localhost:4200

安裝ngx-bootstrap（Bootstrap3和Bootstrap4的本地Angular指令）

1，進(jìn)入項目路徑下，執(zhí)行以下指令安裝ngx-bootstrap和bootstrap4

使用CSS

1，打開項目根路徑下的.angular-cli.json文件

在apps配置項下的第一項下找到“styles”配置項，該項配置允許你將外部全局的css樣式應(yīng)用到項目中。

指定bootstrap.min.css的路徑，例如：

在“styles”配置項下面的“scripts”配置項中指定bootstrap的js文件

注意：修改該文件后你必須重啟服務(wù)才能生效。

使用SASS

方式一：創(chuàng)建項目的時候指定告知使用sass

方式二：修改已經(jīng)創(chuàng)建好的項目

1，修改src/styles.css為src/styles.scss

2，修改.angular-cli.json中"styles"配置項和"defaults"配置項：

3，在src下創(chuàng)建一個“_variables.scss”空文件

4，在styles.scss中添加以下內(nèi)容

讓ngx-bootstrap知道使用bootstrap4

在src/index.html添加以下標(biāo)記

安裝node-sass(如果要使用SASS)

在線安裝方式

注意：npm 安裝 node-sass 依賴時，會從 github.com 上下載   .node 文件。由于國內(nèi)網(wǎng)絡(luò)環(huán)境的問題，這個下載時間可能會很長，甚至導(dǎo)致超時失敗。

1，設(shè)置變量（sass_binary_site）使用淘寶鏡像

或者添加環(huán)境變量

或者設(shè)置全局鏡像源

2，進(jìn)入項目路徑，執(zhí)行以下指令安裝：

或

下載模塊文件本地安裝方式

1，下載文件

    https://github.com/sass/node-sass/releases

2，安裝時候指定變量

提示：可以先卸載了再裝：npm uninstall node-sass 

測試環(huán)境

1，打開src/app/app.module.ts然后添加以下內(nèi)容

2，打開src/app/app.component.html然后添加以下內(nèi)容

  
    Button dropdown 
  
  
    Action
    Another action
    Something else here
    
    Separated link
  

3，運行應(yīng)用，查看效果

    http://localhost:4200

參考地址：http://valor-software.com/ngx-bootstrap/index-bs4.html#/

附：

一：開發(fā)工具推薦

1，Visual Studio Code

2，Node.js Tools for Visual Studio is 

3，WebStorm

4，sublime

二：常見錯誤和解決方案