Win10 下 Nodejs+Angular2+bootstrap4 开发环境搭建
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Win10 下 Nodejs+Angular2+bootstrap4 开发环境搭建相关的知识，希望对你有一定的参考价值。
安装Node.js
1，下载安装包并安装
https://nodejs.org/en/download/
2，查看node和npm的版本信息
node -v npm -v |
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
var foo = require(‘foo‘); // 等同于 var foo = require(‘foo.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字段。下面是一个例子。
// package.json { "name" : "some-library", "main" : "./lib/some-library.js" } |
require发现参数字符串指向一个目录以后，会自动查看该目录的package.json文件，然后加载main字段指定的入口文件。如果package.json文件没有main字段，或者根本就没有package.json文件，则会加载该目录下的index.js文件或index.node文件。
参考链接：http://javascript.ruanyifeng.com/nodejs/module.html
4，设置淘宝镜像
| npm config set registry https://registry.npm.taobao.org |
5，更新npm
| npm install [email protected] -g |
还可以通过以下地址获取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++ 模块】
| npm install --global --production windows-build-tools |
安装方式二：
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 config set python python2.7 |
或
| npm config set python /path/to/executable/python2.7 |
使用npm来安装python的过程中，可以使用“--pythond=2.7”来指定版本。
3，启动cmd，执行以下命令
| npm config set msvs_version 2015 |
验证：任意安装以下一个包以测试环境是否正确
bson
bufferutil
kerberos
node-sass
sqlite3
phantomjs
utf-8-validate
安装后可以执行该命令试试：npm install gulp-image
安装node-gyp
执行以下命令完成安装
| npm install -g node-gyp |
如果系统上安装有多个版本的Python，可以按照以下的方式配置：
--确定要使用的Python版本，执行以下指令设置“--python”变量：
| node-gyp --python /path/to/python2.7 |
--如果node-gyp通过npm的方式调用，那么你可以修改npm的python配置项
| npm config set python /path/to/executable/python2.7 |
手动使用方式(编译本地插件)：
--进入插件跟路径 $cd my_node_addon --生成本系统平台的编译配置文件 $node-gyp configure --执行编译 $node-gyp build |
安装Angular-cli
1，执行以下指令安装Angular-cli
| npm install -g @angular/cli |
2，创建Angular应用
| ng new my-app |
3，进入my-app下，启动应用
ng serve |
4，访问
安装ngx-bootstrap（Bootstrap3和Bootstrap4的本地Angular指令）
1，进入项目路径下，执行以下指令安装ngx-bootstrap和bootstrap4
| npm install ngx-bootstrap [email protected] --save |
使用CSS
1，打开项目根路径下的.angular-cli.json文件
在apps配置项下的第一项下找到“styles”配置项，该项配置允许你将外部全局的css样式应用到项目中。
指定bootstrap.min.css的路径，例如：
| "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], |
注意：修改该文件后你必须重启服务才能生效。
使用SASS
方式一：创建项目的时候指定告知使用sass
| ng new my-app --style=scss |
方式二：修改已经创建好的项目
1，修改src/styles.css为src/styles.scss
2，修改.angular-cli.json中"styles"配置项和"defaults"配置项：
"styles": [ "styles.scss" <-- rename this from .css to .scss ], . . . "defaults": { "styleExt": "scss", <-- set this to default to .scss "component": {} } |
3，在src下创建一个“_variables.scss”空文件
4，在styles.scss中添加以下内容
@import ‘variables‘; @import ‘../node_modules/bootstrap/scss/bootstrap‘; |
让ngx-bootstrap知道使用bootstrap4
在src/index.html添加以下标记
<body> <!-- Enable bootstrap 4 theme --> <script>window.__theme = ‘bs4‘;</script> <app-root> </app-root> </body> |
安装node-sass(如果要使用SASS)
在线安装方式
注意：npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。
1，设置变量（sass_binary_site）使用淘宝镜像
| npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ |
或者添加环境变量
| set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ |
或者设置全局镜像源
| npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ |
2，进入项目路径，执行以下指令安装：
| npm install node-sass |
或
| npm install node-sass --msvs_version=2013 |
下载模块文件本地安装方式
1，下载文件
https://github.com/sass/node-sass/releases
2，安装时候指定变量
| npm i node-sass --sass_binary_path=/Users/dsf/Downloads/darwin-x64-48_binding.node |
提示：可以先卸载了再装：npm uninstall node-sass
测试环境
1，打开src/app/app.module.ts然后添加以下内容
import { BsDropdownModule} from ‘ngx-bootstrap/dropdown‘; ... @NgModule({ ... imports: [BsDropdownModule.forRoot(), ... ], ... }) |
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://valor-software.com/ngx-bootstrap/index-bs4.html#/
附：
一：开发工具推荐
1，Visual Studio Code
2，Node.js Tools for Visual Studio is
3，WebStorm
4，sublime
二：常见错误和解决方案
| 错误有关 | 错误信息 | 解决方法 |
| Python | Python 2.7 is not installed or can‘t be found |
|
| Inability to find msbuild, Visual Studio, or VC compiler | VC compiler not installed, or environment not properly configured |
|
| NaN/Node/v8/iojs-related syntax errors | Package incompatible with current version of Node.js |
|
| Other syntax errors | Incompatible with compiler version |
|
| *Missing command or .h file | Configuration is probably fine, but missing other prerequisites |
|
| MSB4019 error | Older versions of Visual Studio or C++ Build tools already installed |
|
| __pfnDliNotifyHook2 redefinition error |
|
本文出自 “因简单而自在” 博客，请务必保留此出处http://dengshuangfu.blog.51cto.com/8794650/1913292
以上是关于Win10 下 Nodejs+Angular2+bootstrap4 开发环境搭建的主要内容，如果未能解决你的问题，请参考以下文章
win10子系统ubuntu下安装nodejs,并使用n管理版本