Win10下Nodejs+Angular2+bootstrap4開(kāi)發(fā)環(huán)境搭建

安裝Node.js

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

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（可選，以分號(hào)分割的絕對(duì)路徑）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

目錄的加載規(guī)則

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

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

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

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

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

5，更新npm

還可以通過(guò)以下地址獲取npm的模塊

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

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

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

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

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

1，name

  全小寫(xiě)、不能有空格，下劃線和破折號(hào)是允許的。

2,version

  格式：x.x.x

例如：

    {

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

      "version": "1.0.0"

    }

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

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

• npm init --yes 

• npm init -y

4，使用指令往package.json文件中添加依賴(lài)

    {

      "name": "my_package",

      "version": "1.0.0",

      "dependencies": {

            "my_dep": "^1.0.0"

      },

      "devDependencies" : {

            "my_test_framework": "^3.1.0"

      }

    }

• npm install <package_name> --save

• npm install <package_name> --save-dev

• npm uninstall --save <package_name>

• npm uninstall --save-dev <package_name>

5，更新本地包

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

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

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

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

2，你有興趣通過(guò)c++來(lái)編寫(xiě)一些性能優(yōu)異的代碼

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

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

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

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

    安裝方式二：

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

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

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

    或

使用npm來(lái)安裝python的過(guò)程中，可以使用“--pythond=2.7”來(lái)指定版本。

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

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

• bson

• bufferutil

• kerberos

• node-sass

• sqlite3

• phantomjs

• utf-8-validate

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

安裝node-gyp

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

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

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

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

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

安裝Angular-cli

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

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

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

4，訪問(wèn)

    http://localhost:4200

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

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

使用CSS

1，打開(kāi)項(xiàng)目根路徑下的.angular-cli.json文件

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

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

在“styles”配置項(xiàng)下面的“scripts”配置項(xiàng)中指定bootstrap的js文件

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

使用SASS

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

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

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

2，修改.angular-cli.json中"styles"配置項(xiàng)和"defaults"配置項(xiàng)：

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

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

讓ngx-bootstrap知道使用bootstrap4

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

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

在線安裝方式

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

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

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

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

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

或

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

1，下載文件

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

2，安裝時(shí)候指定變量

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

測(cè)試環(huán)境

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

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

<div class="btn-group" dropdown>
  <button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu role="menu" aria-labelledby="single-button">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

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

    http://localhost:4200

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

附：

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

1，Visual Studio Code

2，Node.js Tools for Visual Studio is 

3，WebStorm

4，sublime

二：常見(jiàn)錯(cuò)誤和解決方案

新聞標(biāo)題：Win10下Nodejs+Angular2+bootstrap4開(kāi)發(fā)環(huán)境搭建
當(dāng)前地址：http://bm7419.com/article24/jdsece.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、網(wǎng)站營(yíng)銷(xiāo)、域名注冊(cè)、虛擬主機(jī)、微信小程序、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)