个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
30
4
我正在尝试开发一个可重用的 Vue 组件。它设置为使用 webpack 进行构建，然后演示页面将完整的 Vue 编译器和已编译的包加载到页面上。然而，在加载页面时，尽管包含了 Vue 编译器，我还是收到了以下错误。
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Cwl>
<Root>
我本以为 vue-loader 会设置 cwl 组件的 template 字段，并且我本以为我添加到我的 Vue 版本页面将包括编译器。我在这里缺少什么？
有问题的代码可以在这里看到GitHub URL 。只需克隆存储库，运行 webpack，使用 http-server 启动服务器，然后浏览到 http://localhost:8080/demo/ .
作为引用，我的演示 HTML 页面如下所示:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="vue" class="container container-fluid">
<cwl
cwl-url="https://rawgit.com/rabix/cwl-svg/master/cwl-samples/fastqc.json"
></cwl>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="../dist/index.js"></script>
<script>
Vue.config.devtools = true;
Vue.config.debug = true;
new Vue({
el: '#vue',
components: {
cwl: vue_cwl
}
})
</script>
</body>
</html>
我的 webpack 配置如下所示:
const path = require("path");
module.exports = {
devtool: "source-map",
// Read files from js/src
entry: './cwl.vue',
// Output everything into the static folder
output: {
libraryTarget: "umd",
path: path.resolve("dist/"),
filename: "index.js",
library: 'vue_cwl'
},
externals: {
vue: 'vue'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [require('babel-preset-env')]
}
},
},
{
enforce: "pre",
test: /\.ts?$/,
exclude: ["node_modules"],
use: {
loader: "awesome-typescript-loader",
options: {
useBabel: true
}
}
},
{test: /\.css$/, loaders: ["style-loader", "css-loader"]},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}
]
},
resolve: {
extensions: [".ts", ".js", ".vue"],
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
}
};
最佳答案
如果您console.log(vue_cwl)你可以看到有一个default包含实际 Vue 组件的属性。更改您的代码以使用 default属性作为组件:
components: {
cwl: vue_cwl.default
}
来自my answer to a similar question :
A Vue component is usually exported with
export default { /* ... */}so it facilitates the default import likeimport Component from './component.vue'(ES6 syntax)When using require() (CommonJS) you have to specify you are requiring the default export
在您的情况下，您通过 <script> 直接包含该组件但这个概念仍然存在。
关于javascript - Vue 中的 "Failed to mount component: template or render function not defined"，尽管使用完整的编译器包，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48849554/
30
4
0
我正在尝试添加 ace editor到我的应用程序。我从 github 下载它，将“ace/lib/ace”目录放到我的应用程序目录中，包括: " 在我的正文标签中: editor = ace.edi
如果有人能介绍一下 TypeScript 1.8 模块，我将不胜感激。 我有 SomeClass.ts 文件: export class SomeClass { } 然后，在我的 app.ts 中导入
今天，当我阅读php内核代码时，在目录:php5.3/Zend/Zend.h中，有一行代码让我很困惑。 代码如下: /* overloaded elements data types */ #defi
今天看php的内核代码，在php5.3/Zend/Zend.h目录下，有一行代码搞得我一头雾水。 代码如下: /* overloaded elements data types */ #define
我有一个相当大的项目，我试图将所有 JS 文件连接到一个文件中。我已经能够做到这一点，但我在实际将这两个文件实现到代码中时遇到了麻烦。 我的 Gruntfile 有一个执行串联的任务: require
1在以下示例中似乎没有必要(并且可能具有误导性)，但是在用于检查 #ifdef 时我已经多次看到这种情况s: #ifndef __NEWLIB_H__ #define __NEWLIB_H__ 1 使
感谢您提供的任何帮助。我有一个 Grails 项目，我正在尝试将 Karma 安装到其中。但是，当我运行时 ./gradlew 构建 我收到以下错误: [x-10-105-56-234]SENG519
我从 Frontend Developer Interview Coding Questions 得到了这个问题.为什么下面的代码片段会打印它打印的内容？我最初认为它会抛出一个 ReferenceEr
之前的问题描述有歧义，所以我在下面修改了一些东西。谢谢。 我想像这样实现一些宏: #define AddVariable(x) \ #define x (++counter) class Ba
我知道我正试图朝自己的腿开枪 ;) 但是，它可以让我使其余(大量)代码更小且更易读。 有什么技巧可以在另一个预处理器宏中创建预处理器宏吗？ 这是我正在寻找的示例。我的真实场景更复杂 // That's
在 Microsoft 的 WinDef.h 中引入了几个用于回调的#defines: #ifdef _MAC #define CALLBACK PASCAL #define WINAPI
我知道我想在腿上开枪；)但是，它可以让我使其余(大量)代码更小且更具可读性。 在另一个预处理器宏中创建预处理器宏有什么棘手的方法吗？ 这是我正在寻找的示例。我的真实场景更复杂 // That's wh
当我使用这段代码时: #include #define STR(x) #x int main(void) { printf(__FILE__ STR(__LINE__) "hello!\n"
今天的问候， 您好，我是使用 vb 6.0 的初学者。我正在使用以下代码并获得“用户定义类型未定义”。代码在下面。我得到错误的行被突出显示。请帮助。我应该添加一些引用或组件吗？如果是这样，它会是什么。
当我尝试编译此代码时，在 VB6 中出现编译错误“用户定义的类型未定义”。谁能告诉我需要做什么来解决这个错误？以下是我收到错误的行: Public Conn As ADODB.Connection P
我最近将我的应用程序从 Ember 1.3 升级到了 Ember 2.4.2。然而，在使用 ember build --env production 将其部署到我的生产环境后，我注意到了一些问题。 第
这个问题在这里已经有了答案: Getting user-defined type not defined error when running code (2 个回答) 3年前关闭。 我在运行程序以通
在我的一个项目中，我最近进行了重构并重命名了很多。完成此步骤后，一切正常，所有单元测试都通过了，但是我遇到了以下问题。 当我在VBE中执行“编译”时，确实出现了“用户定义的类型未定义”错误，并出现两种
所以我的 Visual Studio 将 tag1 和 tag2 都声明为未定义，但它们的定义很清楚，我不能根据另一个定义一个吗？ #define push 99 #de
在 Excel 2007 中，我有以下非常简单的 VBA 代码: Public Type specType sb As Long End Type Private Sub MyButton_C
我是一名优秀的程序员,十分优秀！