问题标签 [vue-sfc]

I want to develop a library with vue.js component inside. This component will have navigation elements inside. I want it to work with and without vue router. In router mode it should use <router-link> and if no router is used it should return standard <a> tags.

1. How to detect if vue-router is used in current Vue instance?
2. Is there a better way that if/else for doing <router-link> to <a> fallback if no router is installed?

我正在使用带有 axios 的 Vuex 从我的后端获取数据。但不知何故，我的 Vue 单文件组件（SFC）中的状态属性userName没有更新。

approot.js 状态

吸气剂

单个文件组件

使用 axios 从后端获取数据的操作

突变设置状态变量

问题 当我的单个文件组件调用 getUserName 时，它​​总是呈现“foo”，即硬编码值。我对此感到非常困惑，因为我的其余状态变量设置为相同的模式，并且我的组件在获取它们时没有问题。

任何知道出了什么问题或可以在我的代码中看到缺陷的人？将不胜感激。

我有一个“Settings.vue”组件：

和一个“MyDropdown.vue”组件：

构建时，我收到以下错误：

什么可能导致 TypeError？

我正在为我的 Vue SFC（单文件组件）文件使用 eslint。
Eslint 现在在我的大多数 .vue 文件中都抱怨“解析错误：需要标识符”。

例如：

给出单词“container”的错误（解析错误：预期标识符。eslint [2, 31]）

其他示例：

在“@resize”之前的空间上给出错误（解析错误：标识符预期。eslint [2, 31]）

我确实使用 yarn 安装了 eslint-plugin-vue (6.2.2)，并在我的 .eslintrc 中添加了“plugin:vue/recommended”。我也使用 Quasar 框架。

如何修复错误？

有什么方法可以更改使用 Webpack 加载的 Vue 单文件组件的默认语言属性？

我指的是

这是我首选的加载器列表（语言/语言），而且我大多使用相同的加载器。

如何在 Webpack 中设置它，<template>这意味着pug而不是html，然后需要<template lang='html'>？

谢谢

我正在学习 Vue 并尝试使用 vue-cli 构建第一个应用程序。我有简单的本地组件，效果很好。但是当我想使用外部组件时，我遇到了问题。例如'vuetable-2'。我使用终端通过 npm 在本地安装它：

安装成功，“vue-multiselect”文件夹出现在“node_modules”目录中。然后我在我的单文件组件“ms.vue”文件中添加正确的引用：

一切都编译得很好，但是当我转到浏览器时，页面是空的，并且在控制台中出现以下错误：

我已经尝试过使用其他组件并得到了同样的错误。

我的“App.vue”文件：

编辑 2020-09-02：
我看到的是该问题仅出现在 Vue3 中。当我在 Vue2 中重新创建整个项目时，一切正常。但仍然不知道问题的核心原因......

我对 Vue 插槽不是很满意，所以也许我用错了。我有 2 个按以下方式定义的单文件组件：

HelloWorld.vue：

信息.vue：

我不明白的是：当触发SFC中的mouseover事件时，每次调用方法3次（与我列表中的项目一样多次）。这个方法是怎么被调用的（因为传递给组件的数据没有改变），我怎样才能防止这种潜在的代价高昂的重新渲染？有趣的是，如果我删除切换行高亮的属性，则不会发生重新渲染。HelloWorldbeforeUpdateInfo.vueInfoclassHelloWorld

完整代码在这里：https ://codesandbox.io/s/tender-swanson-57oev

I am making a Vue plugin that contains SFC with its own styles. I am using webpack4 to bundle. For production I use MiniCssExtractPlugin to extract CSS from SFC to separate file. Everything builds up correctly, style.css is created in dist folder and my plugin is working but seems like css from file is not loaded. Is there a step which I am missing? Thank you

main.js

Searchbar.vue

webpack.config.js

In my project, I just install my plugin from npm repository then I use

to import plugin, and then call

wherever I need. The component appear successfully but styles and not applied.

不推荐使用 Vue 3v-deep作为组合器：https ://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

我们有使用 SCSS 的现有代码，v-deep如下所示：

编译成这样的东西：

在 Vue 3 中，不推荐使用这种语法，我们需要这样做：

我们必须v-deep为每个嵌套规则重复。实际上，还有更多，还有一些复杂的规则。

有什么方法可以在 SCSS 中构造一个嵌套块，其中所有内部规则都包含在此::v-deep(...)语法中？

我正在寻找这样的东西（不是实际的语法）：

除了自选择器 ( &) 将具有相反的含义，引用子选择器而不是父选择器。

我正在尝试将一个组件包含到另一个组件中，但在浏览器控制台中出现错误“无法解析组件：应用程序概览表”。

父组件“src/pages/ApplicationsOverview.vue”：

子组件“src/applications/OverviewTable.vue”：

我可以看到正在加载父组件，因为控制台消息“正在加载应用程序概述”正在显示在控制台中。
我还可以看到路径OverviewTable.vue是正确的，因为如果我更改路径，我会得到另一个错误。

我试图更改<applications-overview-table>为<ApplicationsOverviewTable>，但这给了我同样的错误（当然标签名不同）。
我应该在模板中将 CamelCase 组件名称更改为 dash-case 是正确的，不是吗？

我究竟做错了什么？