使用 angular-cli 创建一个augular项目

 

一、安装 angular-cli 脚手架

安装之前需要电脑上已安装node和npm。

首先，全局安装angular脚手架：

npm install @angular/cli -g

进度条走完后可以输入以下命令确认是否安装成功：

C:\Users\SmallBag\Desktop\study\angular_test>ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.2.2
Node: 10.15.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.802.2
@angular-devkit/core         8.2.2
@angular-devkit/schematics   8.2.2
@schematics/angular          8.2.2
@schematics/update           0.802.2
rxjs                         6.4.0

出现版本号，表示安装完成。

 

二、创建一个新的 angular 项目

ng new 项目名称

注意：项目名称只能有 字母、数字、 - 、组合，并且由字母开头。

三、运行项目

首先，进入到我们的项目文件夹下：

cd 项目名称

ng serve

 10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 9.91 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 251 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.82 MB [initial] [rendered]
Date: 2019-08-21T03:50:57.698Z - Hash: 7122fa52ebca0e081113 - Time: 11179ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Compiled successfully.

可看到，项目已经运行在了http://localhost:4200上：

浏览器输入http://localhost:4200打开：

 

 

此时项目已经运行。