Angular开发Antd-App

Edited on In , ,

安装

1
npm install -g @angular/cli

创建项目

1
2
3
4
5
6
7
8
9
ng new gtboot-app
# 是否使用严格校验 
# Would you like to add Angular routing? 是否使用路由
# Which stylesheet format would you like to use?  使用哪种样式表格式?
# 这里选择的 less 与 andv用一样的


cd gtboot-app
ng add ng-zorro-antd-mobile

推荐阅读:

初始化配置

包括引入国际化文件，导入模块，引入样式文件等工作

1
ng add ng-zorro-antd-mobile

启动开发环境

1
2
3
4
ng serve --port 0 --open
# `yarn` 启动
yarn
yarn run start --port 0 --open

修改端口号 --port 端口号 ,当前为 0 则为随机端口号

构建和部署

1
2
3
4
ng build --prod
# `yarn` 构建
yarn
yarn run build

构建 antd

安装组件

1
npm install ng-zorro-antd-mobile --save

引入模块

打开 src/app/app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {NgZorroAntdMobileModule} from 'ng-zorro-antd-mobile';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        /** 导入 ng-zorro-antd-mobile 模块 **/
        NgZorroAntdMobileModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

引入样式

在angular.json中引入 node_modules/ng-zorro-antd-mobile/src/ng-zorro-antd-mobile.min.css
文件。如果需要自定义主题样式，请参考自定义主题部分。

1
2
3
4
5
6
7
8
9
10
{
  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  "styles": [
    "node_modules/ng-zorro-antd-mobile/src/ng-zorro-antd-mobile.min.css",
    "src/styles.css"
  ]
}

使用官方项目

1
git clone https://gitee.com/mirrors/NG-ZORRO-MOBILE.git

使用脚手架

生成组件参数

1
2
3
4
5
6
7
8
9
10
11
--name 组件名称(必选)
--styleext 样式文件扩展名（默认 css）
--prefix, -p 组件选择器前缀
--inlineStyle, -s 使用行内样式
--inlineTemplate, -t 使用行内模版
--path 指定组件创建目录（相当于执行时所在的目录）
--spec 是否生成 .spec 测试文件
--skipImport 是否跳过模块引入（及导入所属模块）
--selector 选择器名称（默认根据 name 自动生成）
--export 是否将组件声明在模块的 exports
--module, -m 指定要声明的模块名

例如通过以下代码可以快速生成一个导航栏组件，其中nav-bar-basic为对应组件代码演示中的 selector 去除demo-前缀。

1
ng g ng-zorro-antd-mobile:nav-bar-basic -p app --styleext='less' --name=navbar

input-item-basic

开发一个登录页面

1
ng g ng-zorro-antd-mobile:input-item-basic -p app --styleext='less' --name=login

创建 service

/src/app/services路径下创建 service

1
2
ng g service services/user
ng g service services/storage

创建 home 页面

1
ng g ng-zorro-antd-mobile:tab-bar-basic  -p app --path="src/app/pages" --styleext='less' --name=home

创建 mine 我的页面

1
ng g ng-zorro-antd-mobile:list-basic  -p app --path="src/app/pages" --styleext='less' --name=mine

打包

基础打包命令

1
ng build

修改打包后的前端路径

打包后会发现 index.html 中的 <base href="/">

这里想修改 baseUrl

打包命令添加

1
ng build --base-href ./

修改配置文件

1
ng build --prod

有项目路径的打包

比如当前发布的路径为 /app
则需要配置 angular.json 中的

1
{outputPath:"dist/app"}

index.html 中 <base href="/"> 也是必须的。

安装报错问题

setTimeout is not defined

这是 cnpm 安装导致的

卸载重装

1
2
npm uninstall -g @angular/cli
npm install -g @angular/cli --registry=https://registry.npmmirror.com

本文地址： https://github.com/maxzhao-it/blog/post/34236/