angular-cli搭建新的项目

一、在开始之前，请确保你的开发环境中包括 Node.js和 npm 包管理器。

Node.js

Angular 需要 Node.js 版本 10.9.0 或更高版本。

• 要检查你的版本，请在终端/控制台窗口中运行 node -v 。

• 要获取 Node.js，请转到 node.js

npm 包管理器

Node.js 已经默认安装了它。

要检查你是否安装了 npm 客户端，请在终端/控制台窗口中运行 npm -v 。

二、安装angular-cli

要使用 npm 命令安装 CLI，请打开终端/控制台窗口，输入如下命令：

npm install -g @angular/cli

new语句表示新建项目

ng new my-app

切换到当前项目目录

cd my-app

install表示安装依赖

npm install

运行应用

npm serve --open

因为默认不支持IE9-11，所以用谷歌浏览器打开的,默认端口4200

http://localhost:4200/   就可以打开页面了，使用基础语法就可以完成这样一个页面

 

下面是项目结构  重点关注圈出来的三个文件

 

新建的组件都放在src-app-component中

如何在这个目录下新建组件呢，可以在终端运行以下代码：

ng g component components/home

 

就会添加home组件了

 

然后我们来看每一个组件中都有什么

可以看到，home组件包括四个文件，其中.ts文件放逻辑代码，.html放html代码,  .css放css代码