我正在使用 vue-loader 并且我面临一个问题，因为我在主 app.js 中创建了一个指令以在组件中使用，但无法在组件中使用该指令。
我收到这条消息：
vue.common.js?e881:1014 [Vue warn]: Failed to resolve directive: swiper (found in component: <testimonial-comp>)
应用程序.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
components: { App },
directives: {
swiper: {
bind: function () {
console.log('my directive');
}
}
}
});
应用程序
<template lang="jade">
testimonial-comp
</template>
<script>
import TestimonialComp from './components/Testimonial.vue'
export default {
components: {
TestimonialComp
}
}
</script>
<style lang="stylus" scoped>
</style>
推荐.vue
<template lang="jade">
article#testimonial
.swiper-container(v-swiper)
.swiper-wrapper
.swiper-slide Slide …我是Vue.js的新手,我在使用带有子组件的组件时遇到了一些麻烦.我有以下.vue文件
app.vue
<template>
<section>
<menu></menu>
<h1>Create Your MIA</h1>
<div id="board"></div>
<slider>
<skin></skin>
</slider>
</section>
</template>
slider.vue
<template>
<div id="slider-panel">
<h3>{{* heading}}</h3>
<div class="slider">
<slot>
Some content
</slot>
</div>
</div>
</template>
<script>
import skin from "./skin";
export default {
components: {
skin: skin
}
};
</script>
skin.vue
<template>
<div v-for="colour in colours">
<div :style="{ backgroundColor: colour }">
<img src="../assets/images/MIA.png"/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
heading: "Choose Skin Tone"
};
}
};
</script>
我正在尝试将皮肤子组件加载到组件中.一切都很好,除了皮肤子组件,因为它没有被编译.我没有得到任何编译或vue相关的错误.我还希望能够有这样的滑块组件的几个实例 …
以下问题：
我有一个依赖于其父级 DOM 的 Vue.js 组件。但是在 prop 被传递的那一刻，它 ( this.$el) 是未定义的，可能是因为它当时还没有安装。
我的组件的 vue 模板文件如下所示：
<template>
<md-card>
<md-card-content>
<ol>
<li v-for="item in headings(content)">
<a :href="`#${item.id}`">{{ item.name }}</a>
</li>
</ol>
</md-card-content>
</md-card>
</template>
<script>
export default {
props: ['content'],
methods: {
headings(content) {
// DOM element is used
// At this moment, `content` is undefined
},
},
};
</script>
使用上述组件的组件包括这段代码：
<article-index :content="this.$el"></article-index>
我想过等待父组件被挂载，但这样我似乎无法像上面那样保留模板，因为它总是会尝试立即访问方法（或变量）。
我该如何解决这个问题？
编辑：
<template>
<div class="content">
<div class="left"><article-index :content="this.$el"></article-index></div>
<div class="article"><slot></slot></div>
<div class="right"><slot name="aside"></slot></div>
</div>
</template>
这是父组件的模板。我唯一真正需要的是.articlediv …
我正在开发一个基于 vue-cli webpack 模板的单页应用程序。由于我们也必须使用静态资产，因此我们需要在样式表中引用它们。
官方文档推荐使用如下绝对路径：
background-image: url('/assets/images/lo/example2.svg');
问题是，静态资源不会由 vue-loader 和 webpack 本身处理，因此在最终输出样式表中不会正确设置 url。webpack url-loader 将处理的所有资产将根据您的 publicPath 配置获得正确的相对 url。静态资产也需要同样的效果。
您知道如何将静态资产与基于 vue.js 的应用程序结合使用吗？
更新
经过研究和大量的反复试验，我决定将最终的样式表和脚本包放在 index.html 旁边的根文件夹中。生成的路径将正常工作。不是最佳解决方案，因为我更喜欢脚本和样式表的子文件夹（尽管它们只包含一个文件）。但尽管如此，我还是有一个生成一致且有效的工件的构建过程。
我想将 vue.js 模板分成 .vue 文件，同时将代码保留在 .js 文件中。
这是一个 vue 的“单文件组件”：
<template>
..
</template>
<script>
..
</script>
什么工作：
使 .vue 文件成为真正的组件，并定义一个指向 .js 文件的 MIXIN。看起来很hacky！
我想要什么：
单个 webpack 导入到 .js 文件：
...
</template>
import ViewModel from 'vm.js'
这可能吗？还是 .vue 文件中 vue-loader 理解的标签？
<template>
..
<script src='vm.js'/>
</template>
万分感谢！目标是在 Visual Studio 代码中设置断点 + 关注点分离 + 可读性。:)
哦，这需要与打字稿一起使用！
我有一个通过Vue CLI创建的项目，现在我想将Pug与我的单文件组件（即.vue文件）一起使用。
为此，我开始遵循此vue-loader 文档并安装pug并pug-plain-loader使用命令npm install -D pug pug-plain-loader. 下一步建议插入以下内容webpack.config.js
// webpack.config.js -> module.rules
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
但是，使用 Vue CLI，我没有明确的 webpack 配置文件，而是vue.config.js.
那么，如何pug-plain-loader在vue.config.js（最好使用webpack-chain）中添加这样的配置？
我目前vue.config.js已经有一个svg-loader特点如下：
module.exports = {
// ...
chainWebpack: (config) => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
//TODO: add pug-plain-loader configuration here
}
}
我对Vue.js完全陌生，因此我觉得问题很简单。这是我的Test.vue组件：
<template>
<p>Hello Worldd</p>
</template>
<script>
export default {
name : 'test'
}
</script>
我正在尝试在另一个名为的组件中显示此“ Hello Worldd” UserDevices.vue。这是该文件的内容：
<template>
<div>
<test></test>
<p>test</p>
</div>
</template>
<script>
import Test from './Test'
export default {
name: 'UserDevices',
components: {Test}
}
我收到一个错误消息：
[Vue warn]: Unknown custom element: <test> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <UserDevices> at src/components/UserDevices.vue
<App> at src/App.vue
<Root>
我正在将webpack支架用于vue作为模板。这不是这样做的正确方法吗？
我在构建项目时遇到以下错误。实际上错误说“缺少绑定/myproject/node_modules/node-sass/vendor/linux-x64-57/binding.node”，但我有“缺少绑定/myproject/node_modules/node-sass/vendor/linux-x64-48” /绑定.节点”。我不知道为什么它没有引用“linux-x64-48”？
错误显示 Run npm rebuild node-sass --force，我这样做了，但没有运气。请帮助我摆脱这个问题。
节点版本：v8.9.1
npm：5.5.1
注意：我什至尝试删除整个node_modules并重新安装（npm install）它。但仍然遇到同样的错误。
ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-6ef6ca5e","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/components/UserProfile.vue
Module build failed: Error: Missing binding /myproject/node_modules/node-sass/vendor/linux-x64-57/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 8.x
Found bindings for the following environments:
- Linux 64-bit with Node.js 6.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass --force` to build the binding for your current environment.
at module.exports …每当我在SFC〜home.vue中的html中添加额外的html行时，都会出现此错误。请参阅以下错误：
> webpack --mode development
Hash: 1e4bd20702518101b259
Version: webpack 4.29.3
Time: 2565ms
Built at: 02/11/2019 10:53:45 PM
Asset Size Chunks Chunk Names
bundle.js 433 KiB main [emitted] main
Entrypoint main = bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 475 bytes {main} [built]
[./wwwroot/app.js] 211 bytes {main} [built]
[./wwwroot/routes.js] 194 bytes {main} [built]
+ 11 hidden modules
ERROR in ./wwwroot/components/home.vue?vue&type=template&id=f890ddf8& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./wwwroot/components/home.vue?vue&type=template&id=f890ddf8&)
Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
RangeError: Invalid string length
at repeat$1 (C:~Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-template-compiler\build.js:4558:28)
at Object.generateCodeFrame (C:\~\Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-template-compiler\build.js:4540:52)
at loaderContext.emitError.compiled.errors.map (C:\~\Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-loader\lib\loaders\templateLoader.js:64:34) …