Visual Studio Code前端配置流程(详细附图版)

268 阅读2分钟

下载安装node .js

打开node.js官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。

node.js插件在windows系统下是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令窗口中直接使用node或npm命令。

解释:为什么要安装node.js? 

答:因为Angular是基于node.js环境的,不同项目需要使用的版本是不同的,请注意!

安装cnpm

在cmd命令窗口中直接输入:

npm install cnpm -g --registry=https://registry.npm.taobao.org

按下enter键直接执行,如下图所示:

安装完毕之后,可输入如下命令检验是否安装成功:

cnpm –v 

 

查看版本号或者关闭命令提示符重新打开,否则安装完毕后直接使用会出现错误。

解释:npm和cnpm的区别?

答:由于npm安装插件是从国外服务器下载,受网络影响很大,可能出现异常,继而淘宝团队生产一个完整的npmjs.org镜像,用cnpm代替npm, cnpm与nodejs的npm用法一致,只是在执行命令时,将npm改为cnpm

 

**安装 typ **escript和typings

用npm安装typescript和typings,在命令提示符中直接输入:

cnpm install typescript@2.2.2 typings –g

运行完毕之后,查看版本确定是否安装成功,在命令提示符中直接输入:

tsc –v

出现版本号,即为安装成功

解释: angular-cli是用typescript写的,所以需要安装typescript和typings

**安装 @angular/cli ** 脚手架

用cnpm安装@angular/cli,直接在命令提示符中输入:

cnpm install @angular/cli@1.0.0 –g
cnpm install –g angular-cli@latest

在cmd中输入“ng version”,出现如下效果,即证明@angular/cli安装成功。

环境搭建完成,可运行ng项目啦。

第一个demo

安装IDE。

有webstorm和vscode两种可供选择,因为webstorm占用内存较高,所以咱们目前使用vscode。

新建angular项目

直接在命令提示符中输入:

ng new angular-cli-project

angular-cli-project是项目名称,根据实际情况自己命名即可

定位到项目目录

在命令提示符中直接输入:

cd angular-cli-project

安装项目依赖的所有node.js

在命令提示符中直接输入:

cnpm install 

 下载项目所需node包,必需步骤!

启动web 服务器

直接在命令提示符中输入:

ng serve

效果图: