Angular-Cli脚手架介绍、安装并搭建项目

简介: Angular-Cli脚手架介绍、安装并搭建项目

什么是 Angularlink

本主题会帮你了解 Angular:什么是 Angular?它有哪些优势?当构建应用时它能为你提供什么帮助?

  • 一个基于组件的框架,用于构建可伸缩的 Web 应用
  • 一组完美集成的库,涵盖各种功能,包括路由、表单管理、客户端-服务器通信等
  • 一套开发工具,可帮助你开发、构建、测试和更新代码

快速上手 

在线演示 第一个本地实例 手动安装 其他

NG-ZORRO 致力于提供给程序员愉悦的开发体验。

image.png

在线演示#

最简单的使用方式参照以下 StackBlitz 演示,也推荐 Fork 本例来进行 Bug Report,注意不要在实际项目中这样使用。

第一个本地实例#

实际项目开发中,你会需要对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。 我们强烈建议使用官方的 @angular/cli 工具链辅助进行开发,下面我们用一个简单的实例来说明。

安装Node.js

https://nodejs.org/download/release/ 所有版本大全

我自己下载的版本

https://nodejs.org/download/release/v12.14.0/

windows 选择 node-v12.14.0-x64.msi 进行安装

安装npm

现在node都集成了npm 在 nodejs\node_modules\npm所有就不用下载了

安装脚手架工具#

image.png

image.png

创建一个项目#

image.png

执行以下命令,@angular/cli 会在当前目录下新建一个名称为 PROJECT-NAME 的文件夹,并自动安装好相应依赖。

image.png

注意: 有可能会报错类似下面这种

The Angular CLI requires a minimum Node.js version of either v12.14 or v14.15.

表示你本地node 和Angular 不复核, 根据提示下载低版本 node 12.14.0 别下载高版本的14.15

image.png

初始化配置#

进入项目文件夹,执行以下命令后将自动完成 ng-zorro-antd 的初始化配置,包括引入国际化文件,导入模块,引入样式文件等工作。

image.png

image.png

开发者可以通过增加参数来完成个性化的初始化配置,例如国际化或者自定义主题等,详细可以参考 脚手架 部分。

开发调试#

一键启动调试,运行成功后显示欢迎页面。image.png

image.png

image.png

使用web工具打开项目

我这里使用HBuilder来打开项目,其他工具也行

2345_image_file_copy_8.jpg

ng serve 命令会启动开发服务器、监视文件,并在这些文件发生更改时重建应用。

--open(或者只用 -o 缩写)选项会自动打开你的浏览器,并访问 http://localhost:4200/

注意:

  1. 如果启动后出现 Error: spawn xxxx ENOENT 那么可能就是你环境变量没配好,或者是你刚下载了node配置了环境而没重启电脑
  2. 360游览器好像不支持使用Angular 谷歌我试了是支持的 ,其他的游览器我没试过

构建和部署#

image.png

文件会被打包到 dist 目录中。

手动安装#

如果想自己维护工作流,理论上你可以利用 Angular 生态圈中的 各种脚手架进行开发,如果遇到问题可参考我们所使用的 配置 进行定制。

安装组件#

$ npm install ng-zorro-antd --save

引入样式#

使用全部组件样式#

该配置将包含组件库的全部样式,如果只想使用某些组件请查看 使用特定组件样式 配置。

angular.json 中引入了

{
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

style.css 中引入预构建样式文件

image.png

style.less 中引入 less 样式文件image.png

使用特定组件样式#

image.png

使用特定组件样式时前需要先引入基本样式(所有组件的共用样式)。

style.css 中引入预构建样式文件

image.png

style.less 中引入 less 样式文件

image.png

引入组件模块#

最后你需要将想要使用的组件模块引入到你的 app.module.ts 文件和特性模块中。

以下面的 NzButtonModule 模块为例,先引入组件模块:

import { NgModule } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NzButtonModule
  ]
})
export class AppModule { }

然后在模板中使用:

<button nz-button nzType="primary">Primary</button>

其他#

目录
相关文章
|
7月前
|
开发者
Angular Schematics 实战 - 项目根目录新建一个文件
Angular Schematics 实战 - 项目根目录新建一个文件
30 0
|
7月前
|
JavaScript
Angular 项目中 angular.json builder 字段的可选项介绍
Angular 项目中 angular.json builder 字段的可选项介绍
45 0
|
8天前
|
C++
【angular】启动项目和路由配置
【angular】启动项目和路由配置
19 1
|
5月前
|
JavaScript
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
|
23天前
设置Open in Terminal快捷键Alt+Shift+Z,方便angular项目的各种命令输入(多任务状态下)
设置Open in Terminal快捷键Alt+Shift+Z,方便angular项目的各种命令输入(多任务状态下)
|
24天前
|
JavaScript 前端开发 开发工具
Angular 项目中一个 index.d.ts 文件的具体例子介绍
Angular 项目中一个 index.d.ts 文件的具体例子介绍
16 0
|
28天前
|
JavaScript 前端开发 开发者
Angular 项目里 tsconfig.schematics.json 文件的作用
Angular 项目里 tsconfig.schematics.json 文件的作用
9 0
|
8月前
Angular 项目中导入 styles 文件到 Component 中的一些技巧
Angular 项目中导入 styles 文件到 Component 中的一些技巧
40 0
|
4月前
|
存储 搜索推荐 API
通过项目中的实际例子,介绍 LocalStorage 在 Angular 开发中的使用场景
通过项目中的实际例子,介绍 LocalStorage 在 Angular 开发中的使用场景
39 0
|
5月前
|
应用服务中间件 nginx
Angular打包构建项目服务器运行runtime.js、polyfills.js、vendor.js报错net::ERR_ABORTED 404 (Not Found),build修改为相对路径./
Angular打包构建项目服务器运行runtime.js、polyfills.js、vendor.js报错net::ERR_ABORTED 404 (Not Found),build修改为相对路径./

热门文章

最新文章