六.Angular项⽬创建、启动到打包部署
安装nodejs和淘宝镜像cnpm
1. 安装nodejs和淘宝镜像cnpm
1.
下载安装nodejs，下载后双击按步骤安装即可。安装之后通过node命令node -v来查看是否安装成功。
npm：nodejs已经集成了npm，node安装会默认装好npm。可通过npm -v命令来查看是否安装成功。
备注：npm 是 Node Package Manager 的简称，顾名思义，它是 node 的包管理⼯具，也是⽬前世界上最⼤的开源库⽣态系统。相⽐ npm，yarn 相信⼤家也不会陌⽣，它是由 facebook 推出并开源的包管理⼯具，具有速度快，安全性⾼，可靠性强等主要优势，参考yarn的安装和使⽤
。
TypeScript的安装（可选）
2.
2. TypeScript的安装（可选）
typescript是ng应⽤开发中使⽤的主语⾔，所以也需要安装ts。打开cmd，输⼊命令⾏cnpm install –g typescript即可完成安装，通过tsc -v命令来验证是否安装成功。
安装脚⼿架⼯具Angular-CLI
3. 安装脚⼿架⼯具
3.
Angular CLI是⼀个命令⾏界⾯⼯具，它可以创建项⽬、添加⽂件以及执⾏⼀⼤堆开发任务，⽐如测试、打包和发布。
Cli是Command Line Interface的简写，是⼀种命令⾏接⼝，实现⾃动化开发流程。它是ng执⾏开发、测试、打包和发布必备的集成化平台，俗称脚⼿架。通过cnpm install -g @angular/cli命令进⾏全局安装，然后通过ng version命令来查看是否安装成功。
脚⼿架安装成功.png
拓展： ng相关命令
ng相关命令.png
4. 使⽤脚⼿架⼯具创建项⽬（初始化项⽬架构）
使⽤ng new myProject命令来新建项⽬，新⽣成的项⽬⽬录结构如下：
项⽬⽬录.png
拓展：常⽤的新建指令
  ng g class classname // 新建 class
  ng g component componentname // 新建组件
  ng g directive directivename // 新建指令
  ng g enum enumname // 新建枚举
  ng g module modulename // 新建模块
gzip是什么文件夹
  ng g pipe pipename // 新建管道
  ng g service servicename // 新建服务
5. 启动项⽬并打包部署
IDE：可使⽤vscode、webstorm和sublime等开发⼯具来开发，推荐使⽤VSCode，安装完成直接打开即可。VSCode可直接打开终端进⾏后续操作，即打开项⽬根⽬录进⼊操作终端：
VSCode操作终端.png
(1) 安装项⽬所需的依赖包：若不是新建的项⽬（如从⽹络下载项⽬源码），直接运⾏项⽬可能因为缺少依赖包⽽报错，需在终端键⼊cnpm install来安装项⽬所需的依赖包。
在VSCode终端安装依赖包.png
补充—安装依赖包完成.png
备注：推荐使⽤cnpm，避免npm会因⽹速等因素导致包下载中断的问题。下载完成会在根⽬录下⽣成node_modules⽂件夹，为项⽬运⾏所需的依赖包。
注意：若先打开的VSCode，后下载安装nodejs和cnpm，将导致ncpm命令⽆法识别，重启VSCode即可解决。
相关报错问题请参考npm/cnpm/ng命令运⾏报错与解决汇总来解决。
(2) 启动项⽬：终端键⼊ng serve，编译成功后启动⼀个内部服务器。
项⽬编译成功.png
备注：等待编译完成，打开浏览器输⼊localhost:4200/即可启动项⽬。
启动项⽬.png 相关报错问题请参考npm/cnpm/ng命令运⾏报错与解决汇总来解决。
(3) 打包：终端键⼊ng build --prod --aot执⾏打包命令。
打包.png

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。