Angular2开发环境搭建教程之VS Code


Posted in Javascript onDecember 15, 2017

前言

VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验。

布局:左侧是用于展示所要编辑的所有文件和文件夹的文件管理器,依次是`资源管理器`,`搜索`,`GIT`,`调试`,`插件`,右侧是打开文件的编辑区域,最多可同时打开三个编辑区域到侧边。

底栏:依次是`Git Branch`,`error&warning`,`编码格式`等。

一、设置开发环境Node  Js

Angular2开发环境主要依赖Node Js和Npm,

需要node 6.9.x和npm  3.x.x 以上的版本 。

查看版本命令使用  node -v和  npm -v.

二 、Angular2或以上版本 使用 Angular  CLI命令行工具

可以快速创建项目 、添加文件以及执行大堆开发 任务 ,比如测试、打包和发布。

然后全局安装 Angular CLI 。

npm install -g @angular/cli

注:安装过程可能 会比较慢 ,需要等待几分钟。

Angular2开发环境搭建教程之VS Code

三、创建新项目

运行下列命令来生成一个新项目以及应用的骨架代码:

ng new my-app

注 :第一次安装过程也比较慢,耐心等待几分钟,

Angular2开发环境搭建教程之VS Code

四、启动开发服务器

进入项目 目录,并启动服务器 

cd my-app
ng serve --open

ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。

使用--open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/

Angular2开发环境搭建教程之VS Code

五、在 VS Code中打开项目

Angular2开发环境搭建教程之VS Code

Angular2开发环境搭建教程之VS Code

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

更多:

Angular CLI简介2

Angular CLI简介

Ionic2 相关文档整理

Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
jQuery each()小议
Mar 18 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 #Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 #Javascript
ReactNative中使用Redux架构总结
Dec 15 #Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 #Javascript
vue实现验证码输入框组件
Dec 14 #Javascript
基于滚动条位置判断的简单实例
Dec 14 #Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 #Javascript
You might like
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Django框架模板的使用方法示例
2019/05/25 Python
python读取并写入mat文件的方法
2019/07/12 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
中专生自我鉴定范文
2013/12/19 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL