我有一个简单的 Vue.js 应用程序，带有这个模板：

<h1>{{ name || '<New Document>' }}</h1>

我的目标是，如果name为假，则使用 text <New Document>。这不是一个自定义标记标签。我希望 Vue.js 将其插入到文档中：

<h1>&lt;New Document&gt;</h1>

相反，我在控制台上收到此警告：

[Vue 警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

根据文档，使用一对大括号{{和}}，表示文本插值，文本将使用该表达式值。相反，Vue.js 似乎想将其视为 HTML。

为什么会这样？如何解决？

这个主意

首先，您拥有一个与其他网站一样的主要Nuxt网站。然后，将我的模块添加到您的项目中。然后，我的模块将一个子域“ admin.example.com”添加到您的项目中，该子域是一个完全充实的基于Nuxt的网站，但完全在您的项目流程中运行，因此不必制作两个必须分别启动的网站项目，我的想法是，我可以先创建一个网站项目，然后创建一个模块项目，再添加另一个网站，然后将三个项目变成两个。

码

module.js

this.addServerMiddleware(vhost('admin.website.com', adminApp));

adminApp.js

const {Nuxt, Builder} = require('nuxt');

const config = require('../admin/nuxt.config');
config.dev = true;

const nuxt = new Nuxt(config);

if (nuxt.options.dev) {
  new Builder(nuxt).build()
    .catch(function(error) {
      console.log(error);
    })
}

module.exports = nuxt.render;

管理网站中nuxt.config.js的一部分

// __dirname leads to my modules directory
// process.cwd() leads to the main websites folder
module.exports = {
  mode: 'universal',
  srcDir: __dirname,
  rootDir: __dirname,
  modulesDir: process.cwd(),

问题

每当我转到“ admin.website.com”时，都会显示以下消息：

我已经尝试了各种更改和调整，但是似乎没有任何效果。据我所知，这可能与以下事实有关：A）网站建立在找不到找到的资源文件的某个地方，或者B）我没有向意大利面条怪物祈祷过。

我尝试导出adminApp为使用的Express应用程序，app.use(nuxt.render)但会导致相同的错误，因此我确定这不是问题。我已经尝试过使用Express应用程序，api.website.com并且效果很好，所以我知道我很喜欢|-| 接近使所有这些工作。这样添加子域确实可以工作，并且每个子域都可以是Express应用程序，但是由于某种原因，Nuxt在以这种方式使用时找不到任何资源。根据https://nuxtjs.org/api/nuxt-render/的 nuxt.render(req, res) …

我正在尝试使用响应式图像的srcset和sizesHTML 属性将特定图像提供给特定屏幕尺寸以进行性能优化和响应式设计。但是 Vue-loader 似乎不支持它们，有人遇到过类似的问题吗？如果不是，有什么可能的解决方案可以最好地优化主要受高清图像影响的应用程序性能。下面是我试图在 .vue 模板中实现的示例

<img srcset="../assets/img-1.jpg 300w,  ../assets/img-1-large.jpg 100vw" 
sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
alt="photo 1"
src="../assets/img-1-large.jpg">

提前致谢。

我正在尝试制作一些 VueJS 的 slot 元素的可重用模板，但效果不佳。

我面临的问题看起来像这样。我制作了 3 个 Vue 文件来构建一些模板。

1. Guide.vue这将是 for 循环的单元。
2. ListView.vue导入ListTemplate.vue和Guide.vue
3. ListTemplate有一个v-for用于 Rows 属性的循环ListView.vue和一个用于 Guide.vue 的插槽。

我想将v-for循环产生的行道具传递到Guide.vue插槽，但似乎是undefined。因此，我尝试在包装组件元素的模板上声明插槽范围ListView.vue，但它不起作用。

// Guide.vue
<template>
    <tr onclick="location.href='info_view.html'">
        <td>
            <p class="alarm_h1">{{ slotProps.row.title }}</p>
            <p class="alarm_h2">{{ slotProps.row.title }}</p>
            <p class="alarm_h2">{{ slotProps.row.title }}</p>
        </td>
    </tr>
</template>

<script>
  export default {
    name: "guide",
    props: ['slotProps', 'row']
  }
</script>


// List.vue
<template>
    <div>
        <Guide-head/>
        <List-template :rows="guides">
            <template>
                <component :is="tr_component"></component>
            </template> …

您好，我是Vue的初学者，确实有一个困扰我的问题。我想知道我们应该使用v-model指令来修改vuex存储吗？Vuex说我们应该只通过突变来修改vuex存储，但是v-model使一切变得更容易和更短。（我问是因为我找不到明确的答案）

我正在尝试将面包屑合并到我的vuetify应用程序中，但这是我的代码：

<v-breadcrumbs divider=">">
    <v-breadcrumbs-item
        v-for="breadcrumb in breadcrumbs"
        exact
        :to="breadcrumb.to">
        {{ breadcrumb.text }}
    </v-breadcrumbs-item>
</v-breadcrumbs>

然后我在控制台中收到此警告。我不太确定这是什么意思。

default slot' is deprecated, use ':items and scoped slot "item"' instead

如果我尝试使用vuetify docs中的默认模板：<v-breadcrumbs :items="items">它仅允许一个href不是:to我需要的模板。

谁能帮我吗。

我有一个带有以下路由器的 Vue.js 项目：

import Vue from 'vue';
import Router from 'vue-router';
import Overview from '@/components/Overview';
import Experiment from '@/components/ForExperiment';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      redirect: 'test',
    },
    {
      path: '/overview',
      component: Overview,
    },
    {
      path: '/overview/from/:from/to/:to',
      name: 'overview',
      component: Overview,
    },
    //... some other urls goes here.
    {
      path: '/test',
      name: 'test',
      component: Experiment,
    },
  ],
});

如果我http://localhost:8080在浏览器中打开，我将被重定向到http://localhost:8080/#/test. 为什么不只是http://localhost:8080/test？“#”符号从何而来？

为什么如果我打开http://localhost:8080/test我被重定向到http://localhost:8080/test#/test？

更奇怪的是，如果我打开，http://localhost:8080/overview我会被重定向到http://localhost:8080/overview#/test，因此不会显示概览组件。 …

我有一个使用Vue CLI 3创建的项目，其中包括Vue的PWA插件。我想显示横幅提示用户点击描述一个在应用程序“刷新”链接在这里的“方法3”部分。

但是在我的Vue.js应用程序中，因为service-worker代码是在中执行的main.js，并且快餐栏横幅已内置到App.vue组件中，所以我不确定showRefreshUI()一旦updated()调用service-worker 事件后如何触发我的方法。

main.js （适用部分）

import Vue from 'vue';
import App from './App';
import './registerServiceWorker';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

register-service-worker （适用部分）

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    updated (registration) {
      console.log('New content is available; please refresh.');
      // I'd like to call App.vue's showRefreshUI() method from here.
    },
  });
}

App.vue （适用部分）

<script>
export default {
  name: 'App', …

我正在尝试启动一个按钮单击图像，但是在运行测试时，它不断出错 find did not return cal-modal, cannot call trigger() on empty Wrapper

我究竟做错了什么？下面非常非常简化的代码：

日历.vue

<template>
                <div class="col-xs-6 text-right">
                    <b-img ref='cal-modal' id='cal-modal' class="cal-icon" @click="displayCal" v-b-modal.date-time-modal src="/static/img/ico.png"></b-img>
                </div>

</template>

测试文件

import {createLocalVue, mount} from "@vue/test-utils";
import Calendar from '@/components/Calendar.vue'
import BootstrapVue from "bootstrap-vue";
const localVue = createLocalVue()
localVue.use(BootstrapVue)


  it('display cal', () => {
      const wrapper = mount(Calendar, {localVue});
      wrapper
          .find('cal-modal')
          .trigger('click')
  })