Win10 下 Nodejs+Angular2+bootstrap4 开发环境搭建

标签：win19   ng2   bootstarp   

安装Node.js

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"

   修改环境变量PATH和NODE_PATH（可选，以分号分割的绝对路径）

    --修改PATH,对应项改为：E:\nodejs-repository\npm_global

    --新建NODE_PATH，设置值：E:\nodejs-repository\npm_global\node_modules

提示：NODE_PATH是历史遗留下来的一个路径解决方案，通常不应该使用，而应该使用node_modules目录机制。在其他位置找不到指定模块时，Node会去这些路径查找。

附：require命令加载规则

require命令用于加载文件，后缀名默认为.js

根据参数的不同格式，require命令去不同路径寻找模块文件。

（1）如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。比如，require(‘/home/marco/foo.js‘)将加载/home/marco/foo.js。

（2）如果参数字符串以“./”开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require(‘./circle‘)将加载当前脚本同一目录的circle.js。

（3）如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。

举例来说，脚本/home/user/projects/foo.js执行了require(‘bar.js‘)命令，Node会依次搜索以下文件。

这样设计的目的是，使得不同的模块可以将所依赖的模块本地化。

（4）如果参数字符串不以“./“或”/“开头，而且是一个路径，比如require(‘example-module/path/to/file‘)，则将先找到example-module的位置，然后再以它为参数，找到后续路径。

（5）如果指定的模块文件没有发现，Node会尝试为文件名添加.js、.json、.node后，再去搜索。.js件会以文本格式的JavaScript脚本文件解析，.json文件会以JSON格式的文本文件解析，.node文件会以编译后的二进制文件解析。

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

目录的加载规则

通常，我们会把相关的文件会放在一个目录里面，便于组织。这时，最好为该目录设置一个入口文件，让require方法可以通过这个入口文件，加载整个目录。

在目录中放置一个package.json文件，并且将入口文件写入main字段。下面是一个例子。

require发现参数字符串指向一个目录以后，会自动查看该目录的package.json文件，然后加载main字段指定的入口文件。如果package.json文件没有main字段，或者根本就没有package.json文件，则会加载该目录下的index.js文件或index.node文件。

参考链接：http://javascript.ruanyifeng.com/nodejs/module.html

4，设置淘宝镜像

5，更新npm

还可以通过以下地址获取npm的模块

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

提示：npm install 指令会在当前路径下创建node_modules目录，并将下载的包存入到该目录下。

          如果当前路径下没有package.json文件，则会下载最新版本的模块。

附：创建package.json文件来管理本地模块

package.json文件中最少要具备以下两个信息：

1，name

  全小写、不能有空格，下划线和破折号是允许的。

2,version

  格式：x.x.x

例如：

    {

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

      "version": "1.0.0"

    }

3，使用npm init来创建package.json文件

该指令会提醒你输入信息，但还可以使用以下命令在不提示的情况下直接创建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 <package_name> --save

• npm install <package_name> --save-dev

• npm uninstall --save <package_name>
  

• npm uninstall --save-dev <package_name>

5，更新本地包

    在package.json所在路径下执行npm update

安装“本机编译插件模块”

有三个最主要的原因使得你应该安装该模块

1，你有一个现成的c++类库想在nodejs应用中使用

2，你有兴趣通过c++来编写一些性能优异的代码

3，运行的时候遇到可怕的“node-gyp”问题并且也不知道发生了什么事的时候

安装node-gyp的依赖环境

1，安装VC++编译环境

    安装方式一：使用管理员权限打开cmd，执行以下命令【Windows 下编译 Node 的 C++ 模块】

    安装方式二：

        1，下载Visual C++ Build Tools（http://landinghub.visualstudio.com/visual-cpp-build-tools），并使用默认选项安装 或者 下载安装Visual Studio 2015(或者免费的vc++ express)，在安装的过程中选择“Common Tools for Visual C++”安装即可。

           注意：win7及以上操作系统需要.NET Framework 4.5.1的支持。

        2，安装Python2.7（v3.x.x不支持），并添加到PATH路径下，同时运行以下命令来设置默认的python

    或

使用npm来安装python的过程中，可以使用“--pythond=2.7”来指定版本。

        3，启动cmd，执行以下命令

验证：任意安装以下一个包以测试环境是否正确

• bson

• bufferutil

• kerberos

• node-sass

• sqlite3

• phantomjs

• utf-8-validate

安装后可以执行该命令试试：npm install gulp-image

安装node-gyp

执行以下命令完成安装

 如果系统上安装有多个版本的Python，可以按照以下的方式配置：

   --确定要使用的Python版本，执行以下指令设置“--python”变量：

   --如果node-gyp通过npm的方式调用，那么你可以修改npm的python配置项

手动使用方式(编译本地插件)：

安装Angular-cli

1，执行以下指令安装Angular-cli

2，创建Angular应用

3，进入my-app下，启动应用

4，访问

    http://localhost:4200

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

1，进入项目路径下，执行以下指令安装ngx-bootstrap和bootstrap4

使用CSS

1，打开项目根路径下的.angular-cli.json文件

在apps配置项下的第一项下找到“styles”配置项，该项配置允许你将外部全局的css样式应用到项目中。

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

注意：修改该文件后你必须重启服务才能生效。

使用SASS

方式一：创建项目的时候指定告知使用sass

方式二：修改已经创建好的项目

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

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

3，在src下创建一个“_variables.scss”空文件

4，在styles.scss中添加以下内容

让ngx-bootstrap知道使用bootstrap4

在src/index.html添加以下标记

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

在线安装方式

注意：npm 安装 node-sass 依赖时，会从 github.com 上下载   .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。

1，设置变量（sass_binary_site）使用淘宝镜像

或者添加环境变量

或者设置全局镜像源

2，进入项目路径，执行以下指令安装：

或

下载模块文件本地安装方式

1，下载文件

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

2，安装时候指定变量

提示：可以先卸载了再装：npm uninstall node-sass 

测试环境

1，打开src/app/app.module.ts然后添加以下内容

2，打开src/app/app.component.html然后添加以下内容

<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，运行应用，查看效果

    http://localhost:4200

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

附：

一：开发工具推荐

1，Visual Studio Code

2，Node.js Tools for Visual Studio is 

3，WebStorm

4，sublime

二：常见错误和解决方案

本文出自 “因简单而自在” 博客，请务必保留此出处http://dengshuangfu.blog.51cto.com/8794650/1913292

Win10 下 Nodejs+Angular2+bootstrap4 开发环境搭建

标签：win19   ng2   bootstarp   

原文地址：http://dengshuangfu.blog.51cto.com/8794650/1913292