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会依次搜索以下文件。
|
这样设计的目的是,使得不同的模块可以将所依赖的模块本地化。
(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然后添加以下内容
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
二:常见错误和解决方案
错误有关 | 错误信息 | 解决方法 |
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 |
|
本文名称:Win10下Nodejs+Angular2+bootstrap4开发环境搭建
网页网址:http://pwwzsj.com/article/jdsece.html