使用Angular CLI创建项目

雨点打透心脏的1/2处 2021-09-14 06:48 413阅读 0赞

[Angular CLI][]是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

1.设置开发环境

①是否有安装Nodejs和npm

[NodeJS、NPM安装配置步骤(windows版本)][NodeJS_NPM_windows]

②全局安装Angular CLI

npm install -g @angular/cli

![20171010144516683][]

注意：如果安装失败了，一定一套卸载再重新安装

npm cache clean

一定要把ng和ng.cmd也删除

③测试是否安装成功

有版本信息就说明安装成功

![20171010145258326][]

2.创建新项目

在f盘创建my-angular

输入命令：ng new 名字(my-angular)

![20171010153456044][]

这个过程可能会等一会儿（有可能很长时间，但是一定要有耐心），一直到出现下图最后二行的提示，说明整个项目的框架搭建完成

![20171010153517976][]

成功后，在f盘可以看到

![20171010153608717][]

3.启动开发服务器

输入命令：

cd  my-angular

ng serve//启动服务器

![20171010153911525][]

4.浏览器预览：http://localhost:4200/

![20171010153943503][]

[Angular CLI]: https://cli.angular.io/
[NodeJS_NPM_windows]: http://blog.csdn.net/gao_xu_520/article/details/75243384
[20171010144516683]: /images/20210813/972d81e97f7c4f0896f7407489cd9b49.png
[20171010145258326]: /images/20210813/6eb0ec5a3c674948a71bbee0dcb4acb3.png
[20171010153456044]: /images/20210813/c2fdbb3021ab48afac3c571b8fd9cc7e.png
[20171010153517976]: /images/20210813/a3e2355bf34849a586434f6d1e0de91e.png
[20171010153608717]: /images/20210813/2aa2521232994978a4ac2fd35c85076e.png
[20171010153911525]: /images/20210813/26a2b001aeef46c68d6d1ad2224c5bd1.png
[20171010153943503]: /images/20210813/edd6d957ef754a7ab3d1a01853b7c634.png

发表评论取消回复

表情：

评论列表（有 0 条评论，413人围观）

还没有评论，来说两句吧...

相关阅读

相关使用vue-cli脚手架创建项目

1.首先肯定要安装node和npm（国内可以使用cnpm镜像\[China npm\]）。 http://nodejs.cn/ ![选择.msi结尾的安装包进行下...

水深无声/ 2024年04月18日 04:04/ 0 赞/ 111 阅读

相关 Angular介绍、安装Angular Cli、创建Angular项目入门教程

场景 Angualr 是一款来自谷歌的开源的web 前端框架，诞生于2009 年，由Misko Hevery 等人创建，后为Google 所收购。是一款优秀的前端J

怼烎@/ 2023年10月07日 12:51/ 0 赞/ 39 阅读

相关 vue-cli使用ts创建项目

使用命令 vue create project\_name 注意：vue create 是vue3的命令，注意更新 ![在这里插入图片描述][watermark_type

素颜马尾好姑娘i/ 2023年07月25日 09:41/ 0 赞/ 89 阅读

相关【Angular】7.Angular8 如何用angular cli工具创建工程

前提条件：在创建angular8项目之前，首先要先确认一下电脑有没有装node.js和npm包管理器。 Node.js Angular需要Node.js版本10.9.0

た入场券/ 2023年07月21日 05:44/ 0 赞/ 29 阅读

相关 angular cli 使用 alias

`angular cli`构建的项目想要像`webpack`一样可以通过配置类似`alias`来简写模块引入路径，可以利用项目中的`tsconfig.json`,通过配置`pa

我就是我/ 2022年12月28日 14:13/ 0 赞/ 191 阅读

相关使用 VS Code 创建 Angular 项目

使用 VS Code 创建 Angular 项目 ![使用 VS Code 创建 Angular 项目][VS Code _ Angular] [VS Code _

朱雀/ 2022年05月22日 11:55/ 0 赞/ 278 阅读

相关创建Angular项目

1、使用命令ng new project-name 来创建一个angular的项目 ![20190216145652201.png][] 2、由于国外的一些node.

ゞ浴缸里的玫瑰/ 2022年03月19日 10:18/ 0 赞/ 862 阅读

相关 Angular CLI

一 Angular CLI 是啥 Angular CLI 是一个命令行接口(Angular Command Line Interface)，用于实现自动化开

冷不防/ 2022年01月23日 00:45/ 0 赞/ 250 阅读

相关使用Angular CLI创建项目

[Angular CLI][]是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。 1.设置开发环境 ①是否有安装Nodejs和np

雨点打透心脏的1/2处/ 2021年09月14日 06:48/ 0 赞/ 414 阅读

相关 Angular 4环境准备与Angular cli创建项目详解

本文介绍的是为`Angular4.0`准备环境和学会使用`Angular cli`来创建项目的相关内容，分享出来供大家参考学习，需要的朋友们下面来一起看看详细的介绍： 1.

水深无声/ 2021年06月26日 16:06/ 0 赞/ 507 阅读