[版权声明] 本站内容采用 知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆 (CC BY-NC-SA 3.0 CN) 进行许可。
部分内容和资源来自网络,纯学习研究使用。如有侵犯您的权益,请及时联系我,我将尽快处理。
如转载请注明来自: Broly的博客,本文链接: VSCode+Node.js+Angular2开发环境
前不久Angular2发布了正式版,而且Angular4不会颠覆式改变语法(对比Angular1和Angular2),所以感觉不会坑的情况下,决定学习Angular2。第一件事当然是搭建个开发环境,但是网上的教程不是很多或者版本比较旧,不适用当前,最后自己摸索出来了:
其他相关博文:
一、测试环境
- Windows 10
- VSCode v1.11.1
- Node.js v6.10.2
- NPM v3.10.10
- tsc v2.2.2
二、安装Node.js、NPM、TSC
直接去官网下载安装包:https://nodejs.org/en/download/
安装好之后,打开命令提示符:Win+R -> cmd ,然后安装tsc,
1 |
npm install -g typescript |
三、安装Visual Studio Code
同样去官网下载VSCode并安装: https://code.visualstudio.com/Download
四、下载Angular2提供的quickstart
官网提供的文档:https://angular.cn/docs/ts/latest/guide/setup.html
1 2 3 |
git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install |
五、VSCode中配置运行环境
首先在VSCode的资源管理器,打开quickstart文件夹。
按F1键,出来输入框后,输入launch,选择“打开launch.json”,编辑
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ // Use IntelliSense to learn about possible Node.js debug attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceRoot}/node_modules/lite-server/bin/lite-server", "cwd": "${workspaceRoot}/" } ] } |
注意:cwd后面要加上 / 斜杠,不然最后运行的时候会找不到路径。(至少我测试是这样)
按F1键,出来输入框后,输入task,选择“配置任务运行程序”,再选择“TypeScript - Watch Mode”,编辑
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": [ "-w", "-p", "." ], "showOutput": "silent", "isBackground": true, "problemMatcher": "$tsc-watch", "watch": true } |
六、运行程序
此时已经算是配置完成了,按F5运行可以看到效果:
参考链接:《Getting Started With Angular 2 Application Using Visual Studio Code》
《VSCode+Node.js+Angular2开发环境》有3个想法
评论已关闭。