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

安装Node.js

成都创新互联公司是专业的太谷网站建设公司,太谷接单;提供成都网站建设、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行太谷网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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 npm@latest -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 --save

  • npm install --save-dev

  • npm uninstall --save 

  • npm uninstall --save-dev

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-p_w_picpath


安装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 bootstrap@next --save

使用CSS

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

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

指定bootstrap.min.css的路径,例如:

"styles": [  
          "../node_modules/bootstrap/dist/css/bootstrap.min.css",  
          "styles.css"  
  ],

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

"scripts": [

        "../node_modules/jquery/dist/jquery.min.js",

        "../node_modules/bootstrap/dist/js/bootstrap.min.js"

  ]

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

使用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添加以下标记

 

 

   

 


安装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然后添加以下内容


  
    Button dropdown 
  
  
    Action
    Another action
    Something else here
    
    Separated link
  

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
  • Run npm -g install npm@next


分享名称:Win10下Nodejs+Angular2+bootstrap4开发环境搭建
标题来源:http://myzitong.com/article/jdsece.html