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获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
js操作滚动条事件实例
Jan 29 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 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
239军机修复记
2021/03/02 无线电
php获取QQ头像并显示的方法
2014/12/23 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
让python json encode datetime类型
2010/12/28 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python中创建二维数组
2018/10/17 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
python实例化对象的具体方法
2020/06/17 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
夜大自我鉴定
2013/10/31 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
初婚未育证明
2014/01/15 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
广告设计应届生求职信
2014/03/01 职场文书
爱心捐书活动总结
2014/07/05 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
授权委托书(完整版)
2014/09/10 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle