我参考了Angular和Pug配置的案例

请你用中文提供以下句子的同义表达:

参考

在Angular-CLI中使用PUG(或Jade)模板。

我按照记录的方法成功地实现了Angular和Pug的协作。

创建 Angular 项目

安装完Node.js后

# Angular インストール
npm install -g @angular/cli
# Angular プロジェクト作成
ng new my-app

NPM(Node包管理器)

叉风派

由于没有提供关于pug-cli的安装说明,所以没有pug-cli安装的说明。

npm install pug-cli --save-dev

巴哥犬装载机

npm i --D apply-loader pug-loader

剧本?

pug-rule-insert.js文件

请在项目根目录下准备pug-rule-insert.js文件。

node pug-rule-insert.js

準備好Pug文件。

将 Angular 的 HTML 文件转换为 Pug 格式。

<!--The content below is only a placeholder and can be replaced.-->
div(
  style="text-align:center"
)
  h1 Welcome to {{ title }}!
  img(
    width="300"
    alt="Angular Logo"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
  )
h2 Here are some links to help you start:
ul
  li
    h2
      a(
        target="_blank"
        rel="noopener"
        href="https://angular.io/tutorial"
      ) Tour of Heroes
  li
    h2
      a(
        target="_blank"
        rel="noopener"
        href="https://github.com/angular/angular-cli/wiki"
      ) CLI Documentation
  li
    h2
      a(
        target="_blank"
        rel="noopener"
        href="https://blog.angular.io/"
      ) Angular blog
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  //templateUrl: './app.component.html',
  templateUrl: './app.component.pug',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

确认 Angular 的行为

ng serve -o

我已经确认了这个。

广告
将在 10 秒后关闭
bannerAds