我参考了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
我已经确认了这个。