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

一、Node.js和npm

在node官网(https://nodejs.org/zh-cn/download/)下载安装包,根据电脑系统安装对应包。

前端项目如何引入less_命令行


打开安装包,直接点击下一步,完成安装。

前端项目如何引入less_命令行_02


前端项目如何引入less_命令行_03


前端项目如何引入less_命令行_04


前端项目如何引入less_angular_05


前端项目如何引入less_前端项目如何引入less_06

检测Node.js版本:点击开始 =》运行 =》输入‘cmd’ =》输入命令‘node –version’。

前端项目如何引入less_前端项目如何引入less_07


NPM是随同NodeJS一起安装到本地的包管理工具,由于NodeJS集成了NPM,我们可以通过命令行‘npm -v’检测是否安装成功:

前端项目如何引入less_项目部署_08

二、TypeScript的安装(可选)

typescript,是ng应用开发中使用的主语言,所以也需要安装ts。打开cmd,输入命令行‘npm install –g typescript’。

前端项目如何引入less_前端项目如何引入less_09


验证 ‘tsc -v’ 安装情况

前端项目如何引入less_项目部署_10

三、Angular-cli的安装

Cli是Command Line Interface的简写,是一种命令行接口,实现自动化开发流程。它是ng执行开发、测试、打包和发布必备的集成化平台,俗称脚手架。

全局安装‘npm install –g @angular/cli’。

前端项目如何引入less_前端项目如何引入less_11


稍作等待,完成安装可以检查脚手架版本‘ng -v’。

前端项目如何引入less_ng项目搭建_12


期间可能会安装失败,查看错误信息,可能由于node-sass的包被墙了,解决方案当然是用cnpm安装。首先安装淘宝镜像‘npm install –g cnpm –registry=https://registry.taobao.org

前端项目如何引入less_命令行_13


再安装node-sass,命令行是‘cnpm install –save-dev node-sass’,完成后再执行cli的安装命令即可完成安装。

前端项目如何引入less_命令行_14

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

推荐使用IDE:VSCode,下载地址:https://code.visualstudio.com/,安装完成直接打开即可。VSCode可直接打开终端,进行后续操作。

首先,打开项目更目录,进入下面操作终端。

第一步,终端键入‘cnpm install’,安装项目所需的依赖包。推荐使用cnpm,避免npm会因为网速等因素导致包下载中断的问题。下载完成会在根目录下生成‘node_modules’文件夹,为项目运行所需的依赖包。

前端项目如何引入less_项目部署_15


第二步,启动项目。终端键入‘ng serve’,等待编译完成,打开浏览器输入‘localhost:4200/’即可启动项目。

前端项目如何引入less_ng项目搭建_16


前端项目如何引入less_ng项目搭建_17


第三步,打包部署。终端键入‘ng build –prod -aot’,执行打包命令。完成后会在根目录下生成dist文件夹,里面是压缩打包完成的文件。用该目录下文件替换线上服务器前端目录,完成打包部署。