angular项目从部署到启动

angular是前端三大框架之一,适合开发大型需要多人合作的项目,代码规范,社区活跃,不过学习曲线陡峭。这篇介绍环境搭建,完成就可以启动ng项目了。

一、Node.js和npm

在node官网(https://nodejs.org/zh-cn/download/)下载安装包,根据电脑系统安装对应包。
angular项目从部署到启动_第1张图片
打开安装包,直接点击下一步,完成安装。
angular项目从部署到启动_第2张图片
angular项目从部署到启动_第3张图片
angular项目从部署到启动_第4张图片
angular项目从部署到启动_第5张图片
angular项目从部署到启动_第6张图片

检测Node.js版本:点击开始 =》运行 =》输入‘cmd’ =》输入命令‘node –version’。
angular项目从部署到启动_第7张图片
NPM是随同NodeJS一起安装到本地的包管理工具,由于NodeJS集成了NPM,我们可以通过命令行‘npm -v’检测是否安装成功:
angular项目从部署到启动_第8张图片

二、TypeScript的安装(可选)

typescript,是ng应用开发中使用的主语言,所以也需要安装ts。打开cmd,输入命令行‘npm install –g typescript’。
这里写图片描述
验证 ‘tsc -v’ 安装情况
这里写图片描述

三、Angular-cli的安装

Cli是Command Line Interface的简写,是一种命令行接口,实现自动化开发流程。它是ng执行开发、测试、打包和发布必备的集成化平台,俗称脚手架。
全局安装‘npm install –g @angular/cli’。
这里写图片描述
稍作等待,完成安装可以检查脚手架版本‘ng -v’。
angular项目从部署到启动_第9张图片
期间可能会安装失败,查看错误信息,可能由于node-sass的包被墙了,解决方案当然是用cnpm安装。首先安装淘宝镜像‘npm install –g cnpm –registry=https://registry.taobao.org’
这里写图片描述
再安装node-sass,命令行是‘cnpm install –save-dev node-sass’,完成后再执行cli的安装命令即可完成安装。
这里写图片描述

四、安装IDE,启动项目,打包部署

推荐使用IDE:VSCode,下载地址:https://code.visualstudio.com/,安装完成直接打开即可。VSCode可直接打开终端,进行后续操作。
首先,打开项目更目录,进入下面操作终端。
第一步,终端键入‘cnpm install’,安装项目所需的依赖包。推荐使用cnpm,避免npm会因为网速等因素导致包下载中断的问题。下载完成会在根目录下生成‘node_modules’文件夹,为项目运行所需的依赖包。
这里写图片描述
第二步,启动项目。终端键入‘ng serve’,等待编译完成,打开浏览器输入‘localhost:4200/’即可启动项目。
这里写图片描述
这里写图片描述
第三步,打包部署。终端键入‘ng build –prod -aot’,执行打包命令。完成后会在根目录下生成dist文件夹,里面是压缩打包完成的文件。用该目录下文件替换线上服务器前端目录,完成打包部署。

你可能感兴趣的:(javascript,软件操作)