【Angular4.X学习笔记二】开发环境配置(windows)
来源:互联网 发布:图像显著性检测算法 编辑:程序博客网 时间:2024/06/01 10:36
文章目录:
- 环境准备
- WebStorm安装与激活
- Node.js(含npm)安装
- Angular CLI安装
- 使用npm命令创建Angular项目并运行
- 在WebStorm中创建Angular项目并运行
- 总结
一、环境准备
- WebStorm-2017.2
- Node.js 6.11.1-x64
- NPM 3.10.10
下载地址:https://docs.npmjs.com/getting-started/installing-node
--------------------------------------------------------------------------------------------------------------------------------
二、WebStorm安装与激活
下载安装包之后即可进行安装,全程next即可,如果想修改安装路径也可以修改一下。安装完成之后运行程序,未激活的WebStorm有使用限制。在提示激活界面选择License Server ,在输入框中输入网址http://idea.imsxm.com,点击激活即可。打开之后可以进行简单的设置,比如编辑器的字体,字号等。
激活教程:http://www.imsxm.com/jetbrains-license-server.html
--------------------------------------------------------------------------------------------------------------------------------
示例目录地址为:C:\Program Files\nodejscd C:\Program Files\nodejsmkdir node_global\node_modules //创建目录mkdir node_cachenpm config set prefix "C:\Program Files\nodejs\node_global"npm config set cache "C:\Program Files\nodejs\node_cache"
2.配置环境变量
右击“计算机”--->“属性”--->“高级系统设置”--->“环境变量”
在[系统变量]中,设置 NODE_PATH ,新建 NODE_PATH ,值为C:\Program Files\nodejs\node_global\node_modules在”用户变量”中,修改用户变量中的path,添加C:\Program Files\nodejs\node_global\
--------------------------------------------------------------------------------------------------------------------------------
2.Angular使用typescript进行开发的,需要安装typescript进行支持将下载的binding.node放到指定目录,例如:C:\win32-x64-51_binding.node执行配置命令:npm config set sass_binary_path "C:\win32-x64-51_binding.node"npm config set sass_binary_site “https://npm.taobao.org/mirrors/node-sass/” //使用阿里的镜像
1
3.全局安装angular-clinpm install -g typescript typings
1
npm install -g @angular/cli
--------------------------------------------------------------------------------------------------------------------------------
五、使用npm命令创建Angular项目并运行
创建项目之前需要在命令框中将项目位置定位到你想要的位置(cd 命令或输入盘符直接修改目标盘位置)
创建新项目(my-app)的命令:ng new my-app
这一过程花费时间较长,主要是需要下载很多npm包
创建成功的项目是具有完整的项目结构的,不用进行任何修改即可运行。首先进入项目目录,启动服务器。
cd my-appng serve --open
ng serve为启动服务器的命令,服务器启动之后会一直处于监听状态,能实时监听项目是否进行了修改,如果修改了能自动进行刷新。--open命令打开浏览器并访问地址http://localhost:4200,此时浏览器页面将会显示如下内容:--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
- 【Angular4.X学习笔记二】开发环境配置(windows)
- Angular4学习笔记(一)-环境搭建
- Angular4.x开发环境及项目创建(一)
- COCOS2DX学习笔记 windows下cocos2d-x的环境配置
- Angular4学习笔记(一):准备和环境搭建
- Angular4学习笔记(二):绑定和分包
- Angular4学习笔记(二)-在WebStorm中启动项目
- 【学习笔记1 --- Cocos2d-x开发环境配置 + Win7 + VS2010】
- cocos2d-x android开发学习笔记(一) 开发环境的配置与HelloWorld
- angular4学习笔记(一)
- COCOS2DX学习笔记(一) windows下cocos2d-x的环境配置
- Spark2.x学习笔记:6、在Windows平台下搭建Spark开发环境(Intellij IDEA)
- cocos2d-x windows开发环境配置
- zigbee学习笔记(二) 开发环境
- Cocos2dx学习笔记001:Windows配置Cocos2dx-cpp开发环境
- cocos2d-x 3.x游戏开发学习笔记(1)--mac下配置cocos2d-x 3.x开发环境
- cocos2d-x 3.x游戏开发学习笔记(1)--mac下配置cocos2d-x 3.x开发环境
- cocos2d-x 3.x游戏开发学习笔记(1)--mac下配置cocos2d-x 3.x开发环境
- 数组切分
- KVM — 使用 libvirt 工具栈创建管理虚拟机实例
- 《Neural Networks and Deep Learning》codes' note
- ApplicationContext和BeanFactory的关系
- JVM内存模型
- 【Angular4.X学习笔记二】开发环境配置(windows)
- 康奈尔大学王飞博士:AI处理医疗数据面临的8大挑战
- 机器学习笔记:决策树
- HDU6033-Add More Zero
- SDK中创建控件和控件消息
- 使用JDBC连接数据库
- 暑假集训test12
- 顺序的分数
- JAVA基础之multipart,urlencoded以及JSON