一、安装node.js运行环境,安装NPM包管理工具(安装node运行环境时会附带NPM包管理工具)
1、进入(https://nodejs.org/en/download/)下载
LTS6.10.0+ Window 64bit .msi
文件 (ps:目前公司开发环境Node版本是,可以使用Nvm管理工具管理Node的版本问题,可以实现电脑上面安装多个Node的版本)2、运行下载好的
Window 64bit .msi
安装文件(一路点击Next默认安装即可)3.查看Node版本和Npm版本
(1)、查看已安装Node版本:node -v
(2)、查看Npm版本:npm -v
二、切换npm的默认源为淘宝镜像
1、查看当前npm源
npm config get registry
,默认为https://registry.npmjs.org/
(源即为执行npm install
时默认从哪个仓库拉取npm包)2、修改npm源(以下方式三选一)
(1)、通过config命令,执行window+R
键,输入cmd打开Window的Dos命令框,输入npm config set registry https://registry.npm.taobao.org
(2)、命令行指定,执行window+R
键,输入cmd打开Window的Dos命令框,输入npm --registry https://registry.npm.taobao.org info underscore
(3)、编辑~/.npmrc
文件并加入下面内容,打开文件资源管理器,在C:/Users/电脑名
路径下即可找到~/.npmrc
,打开~/.npmrc
替换registry = https://registry.npm.taobao.org
三、安装angular-cli脚手架工具
1、执行
npm install -g @angular/cli
全局安装angular-cli脚手架工具,使用ng -v
成功查询到angular-cli脚手架的版本号即为安装成功,更多ng脚手架操作请执行ng help
四、使用angular-cli脚手架初始化项目
1、进入到准备存放项目的文件夹,使用
shift+鼠标右键
弹出提示框,选择在此处打开命令窗口
(或者W键+Enter键
) 弹出Window Dos命令框2、在Dos命令框里面输入
ng new 项目名称
即可下载使用脚手架开发项目的基本模板3、cd 进入下载的项目文件夹,执行
npm install
安装项目的依赖包4、等待项目依赖包安装完毕,执行
ng serve
即可用启动项目5、项目开发完毕后可使用
ng build
打包项目(angular4+版本默认是使用--aot编译,angular2版本要使用ng build --aot --prod
)
五、安装node-sass包(此步骤为可选,当你想在本地编译sass文件或者项目组件中使用.sass文件编写样式文件须安装此npm包)
1.由于直接执行
npm install -g node-sass
命令安装node-sass包肯定会失败,所以你有如下几种解决办法
(1)、翻墙下载,确保你的电脑网络是翻墙的状态下执行npm install -g node-sass
(2)、使用node-sass离线安装包离线安装node-sass包
六、你可能会遇到的安装失败情况及其解决办法
1.node-sass安装失败(node-sass需要前置c++环境,node-sass被墙)
(1)、由于angular4.0项目依赖里面取消了对node-sass的默认依赖,所以使用npm install
安装项目依赖的时候不会报错(2)、如果项目组件中需要使用.scss文件,你需要安装node-sass包
(3)、安装node-sass的依赖环境(主要是依赖的c++环境),在window Dos命令框输入
npm install --global --production windows-build-tools
(4)、翻墙下载:网络翻墙之后,打开Window Dos命令框,输入
npm install -g node-sass
,使用node-sass -v可以查看node-sass的版本即为下载成功,反之则为失败(5)、如果你不能翻墙则采用这种办法,下载node-sass离线包(win32-x64-51_binding.node,x64-48版本以上都行),打开window文件资源管理器,找到
C:/Users /window用户名/AppData/Roaming/npm-cache/node-sass/4.5.3(node-sass版本号)
文件夹,删除里面的package文件夹和package.tgz文件,然后放入win32-x64-51_binding.node文件,然后打开window Dos命令框输入npm install -g node-sass
全局安装node-sass包,脚手架生成的项目也需要使用npm install node-sass
安装项目的node-sass依赖包,使用node-sass -v可以查看node-sass的版本即为下载成功,反之则为失败(ps:解释一下为什么需要全局安装和项目安装,全局安装是为了使用node-sass命令编译静态资源里面的.scss文件为.css文件,项目安装是因为你项目组件里面使用.scss文件,则需要安装项目的sass编译环境,也就是说项目打包编译时并不会主动去全局找node-sass包编译.scss文件)