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会依次搜索以下文件。

  • /usr/local/lib/node/bar.js

  • /home/user/projects/node_modules/bar.js

  • /home/user/node_modules/bar.js

  • /home/node_modules/bar.js

  • /node_modules/bar.js

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

(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,访问

    http://localhost:4200



安装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://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


二:常见错误和解决方案

错误有关错误信息解决方法
PythonPython 2.7 is not installed or can‘t be found
  • Install Python 2.7 and add to PATH

  • Specifiy --python=2.7 during npm install

  • npm config set python 2.7 to set default

Inability to find msbuild, Visual Studio, or VC compiler

VC compiler not installed, or environment not properly configured

  • Install VC++ compiler

  • Specify --msvs_version=2015 (or other VS version)

  • npm config set msvs_version 2015 -g

NaN/Node/v8/iojs-related syntax errorsPackage incompatible with current version of Node.js
  • Upgrade to latest version of package + node.js, and see if issue still exists

  • Search issues and/or file an issue on package repo

Other syntax errorsIncompatible with compiler version
  • Upgrade to latest version of package + node.js, and see if issue still exists

  • Search issues and/or file an issue on package repo

*Missing command or .h fileConfiguration is probably fine, but missing other prerequisites
  • Upgrade to latest version of package

  • Check docs, try to install missing prerequisites, ensure they‘re accessible in PATH

  • Search for header file or other pre-requisite that‘s missing, that may provide a clue where it‘s supposed to come from (e.g. Windows SDK not installed, OpenSSL, etc.)

  • Search issues and/or file an issue on package repository

MSB4019 errorOlder versions of Visual Studio or C++ Build tools already installed                              
  • Add or modify the environment variable VCTargetsPath top point at the C++ build tools path. This should be something like C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\v140 (where 140 corresponds to Visual Studio 2015)

  • Search issues and/or file an issue on package repo

__pfnDliNotifyHook2 redefinition error


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

以上是关于Win10 下 Nodejs+Angular2+bootstrap4 开发环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

nodeJs的升降级(win10下)

win10子系统ubuntu下安装nodejs,并使用n管理版本

nodejs中没有'dist'的Angular 2

win10安装nodejs遇到提示错误代码2503怎么办

win10系统安装nodejs遇到提示错误代码2503的解决办法

Angularjs2 学习笔记