- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
根据 Vue.js documentatin在单文件组件中使用 pug 预处理器,pug-plain-loader (不是 pug-loader )需要:
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
如果除了 Singe 文件组件(.vue 文件)我还需要将 pug 模板导入 TypeScript 类,由 vue-property-decorator 提供怎么办?包(基于 vue-class-component )?
我必须看到 example仅用于 html 模板加载:
@Component({
template: require('./MyComponent.html')
})
export default class MyComponent extends Vue {
//...
}
如果需要改用pug怎么办?
@Component({
template: require('./RegularButton.pug')
})
export default class RegularButton extends Vue {
//...
}
在这种情况下,不应使用 pug-plain-loader:
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <button @click="onClickEventHandler">{{ lettering }}</button>
@ ../ReusableComponents/RegularButton/RegularButton.ts 18:18-48
@ ./SPA_Test.ts
我知道首先我需要安装 pug-loader。但是我需要如何协调我的 webpack 配置与 pug-plain-loader 设置?
// ...
module: {
rules: [
{
test: /\.ts?$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.json5$/,
loader: 'json5-loader'
},
{
test: /\.(yml|yaml)$/,
use: ['json-loader', 'yaml-loader']
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
]
}
NonErrorEmittedError: (Emitted value instead of an instance of Error)
Errors compiling template:
text "export default "" outside root element will be ignored.
1 | export default "<div class=\"container\"><h1>{{ pageTitle }}</h1><hr><div><div>V-Model Test:</div><div>{{ vModelTestProperty }}</div><div><input type=\"text\" v-model=\"vModelTestProperty\"></div></div><hr><div><div>{{ defaultTextLabel }}</div><div><RegularButton :lettering=\""Non default button text"\" :onClickEventHandler=\"executeTest\"></RegularButton></div></div></div>"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
at Object.emitError (C:\Users\i\Documents\PhpStorm\InHouseDevelopment\mylib\node_modules\webpack\lib\NormalModule.js:165:14)
at Object.module.exports (C:\Users\i\Documents\PhpStorm\InHouseDevelopment\mylib\node_modules\vue-loader\lib\loaders\templateLoader.js:61:21)
@ ./SPA_Test.vue?vue&type=template&id=cabf1cca&lang=pug& 1:0-422 1:0-422
@ ./SPA_Test.vue
@ ./SPA_Test.ts
组件:
<template lang="pug">
.container
h1 {{ pageTitle }}
hr
div
div V-Model Test:
div {{ vModelTestProperty }}
div: input(type='text' v-model='vModelTestProperty')
hr
div
div {{ defaultTextLabel }}
div: RegularButton(:lettering='"Non default button text"' :onClickEventHandler='executeTest')
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class SPA_Test extends Vue {
private pageTitle: string = 'SPA related test';
private vModelTestProperty: string = 'Inputted characters will be displayed here';
private defaultTextLabel: string = 'Default text';
public executeTest(): void {
console.log('Test O\'K');
}
}
</script>
我不认为@Hammerbot 的解决方案是错误的;也许它是正确解决方案的一部分。无论如何,通过设置
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
一切正常,除非 .pug
无法在 @Component
装饰器中导入:
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({
//template: require('./RegularButton.pug') // error will occur
template: '<button @click="onClickEventHandler">{{ lettering }}</button>'
})
export default class RegularButton extends Vue {
@Prop({default: 'Default text', type: String}) private readonly lettering!: string;
@Prop({default: (): void => {}, type: Function}) private readonly onClickEventHandler!: () => {};
}
最佳答案
据Vue.js官方documentation , 要将 vue-loader
与 pug-plain-loader
一起使用,您需要按如下方式配置加载器规则:
If you also intend to use it to import
.pug
files as HTML strings in JavaScript, you will need to chainraw-loader
after the preprocessing loader. Note however addingraw-loader
would break the usage in Vue components, so you need to have two rules, one of them targeting Vue files using aresourceQuery
, the other one (fallback) targeting JavaScript imports:// webpack.config.js -> module.rules
{
test: /\.pug$/,
oneOf: [
// this applies to `<template lang="pug">` in Vue components
{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
},
// this applies to pug imports inside JavaScript
{
use: ['raw-loader', 'pug-plain-loader']
}
]
}
关于typescript - 如何设置 Webpack 以便能够在单文件组件 (.vue) 和 "vue-class-component"类中使用 Pug?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55153689/
单向链表 单向链表比顺序结构的线性表最大的好处就是不用保证存放的位置,它只需要用指针去指向下一个元素就能搞定。 单链表图解 图画的比较粗糙,简单的讲解一下: 上面四个长方形,每个长方
使用TCP,我正在设计一些类似于next的程序。 客户端在许多线程中的接收正在等待一台服务器的发送消息。但是,这是有条件的。 recv正在等待特定的发送消息。 例如 客户 thread 1: recv
我正在编写正则表达式来验证电子邮件。唯一让我困惑的是: 顶级域名可以使用单个字符吗?(例如:lockevn.c) 背景:我知道顶级域名可以是 2 个字符到任意字符(.uk、.us 到 .canon、.
是否可以在单个定义中定义同一 Controller 的多个路由? 例如: 我想要一个单一的定义 /, /about, /privacy-policy 使用类似的东西 _home: pat
我正在使用 objective-c开发针对 11.4 iOS 的单 View 应用程序,以及 Xcode版本是 9.4.1。 创建后有Main.storyboard和LaunchScreen.stor
我一直在尝试在 shell 程序中实现管道结构,如果我执行简单的命令(例如“hello | rev”),它就可以工作 但是当我尝试执行“head -c 1000000/dev/urandom | wc
此表包含主机和接口(interface)列UNIQUE 组合* 编辑:这个表也有一个自动递增的唯一 ID,抱歉我应该在之前提到这个 ** | host.... | interface..... |
我想将具有固定补丁大小的“std filter”应用于单 channel 图像。 也就是说,我希望 out[i,j] 等于 img[i,j] 附近的像素值的标准值。 对于那些熟悉 Matlab 的人,
假设我想进行网络调用并使用 rx.Single,因为我希望只有一个值。 我如何应用replay().autoConnect() 这样的东西,这样当我从多个来源订阅时网络调用就不会发生多次?我应该使用
我将图像从 rgb 转换为 YUV。现在我想单独找到亮度 channel 的平均值。你能告诉我如何实现这一目标吗?此外,有没有办法确定图像由多少个 channel 组成? 最佳答案 你可以这样做: #
在比较Go和Scala的语句结束检测时,我发现Scala的规则更丰富,即: A line ending is treated as a semicolon unless one of the foll
在IEEE 1800-2005或更高版本中,&和&&二进制运算符有什么区别?它们相等吗? 我注意到,当a和b的类型为bit时,这些coverpoint定义的行为相同: cp: coverpoint a
我正在使用Flutter的provider软件包。我要实现的是为一个 View 或页面提供一个简单的提供程序。因此,我在小部件中尝试了以下操作: Widget build(BuildContext c
我正在尝试在 cython 中使用 openmp。我需要在 cython 中做两件事: i) 在我的 cython 代码中使用 #pragma omp single{} 作用域。 ii) 使用#pra
我正在尝试从转义字符字符串中删除单引号和双引号。它对单引号 ' 或双自动 " 不起作用。 请问有人可以帮忙吗? var mysting = escapedStr.replace(/^%22/g, '
我正在尝试在 cython 中使用 openmp。我需要在 cython 中做两件事: i) 在我的 cython 代码中使用 #pragma omp single{} 作用域。 ii) 使用#pra
我正在使用 ANT+ 协议(protocol),将智能手机与 ANT+ USB 加密狗连接,该加密狗通过 SimulANT+ 连接到 PC。 SimulANT+ 正在模拟一个心率传感器,它将数据发送到
有人可以解释/理解单/多线程模式下计算结果的不同吗? 这是一个大约的例子。圆周率的计算: #include #include #include const int itera(100000000
我编写了一个粗略的阴影映射实现,它使用 6 个不同的 View 矩阵渲染场景 6 次以创建立方体贴图。 作为优化,我正在尝试使用几何着色器升级到单 channel 方法,但很难从我的着色器获得任何输出
尝试使用 Single-Spa 构建一些东西并面临添加到应用程序 AngularJS 的问题。 Angular2 和 ReactJs 工作完美,但如果添加 AngularJS 并尝试为此应用程序使用
我是一名优秀的程序员,十分优秀!