0

- 更新 -

我忘了提到这个问题，我正在使用 Laravel Mix 来捆绑我的代码。

webpack.mix.js

const mix = require("laravel-mix");
mix
  .js("src/js/index.js", "dist/js")
  .vue()
  .version()
  .js("src/js/popup.js", "dist/js")
  .vue()
  .version()
  .js("src/js/background.js", "dist/js")
  .version()
  .sass("src/css/main.scss", "dist/css")
  .sass("src/css/popup.scss", "dist/css")
  .copy("src/assets", "dist/assets")
  .copy("src/html", "dist/html")
  .copy("src/manifest.json", "dist")
  .setPublicPath("./")
  .options({ processCssUrls: false });

当我这样设置时，webpackVue 2默认使用。澄清一下，Vue 2对我的项目来说非常好。我只想要Vue 3.

从Laravel Mix 上列出的文档中，我应该这样做以指定Vue 3

mix.js('src/app.js', 'dist').vue({ version: 3 });

当我webpack.mix.js这样配置时，它最终会抛出错误Can't resolve 'vue' in path/to/file

- 原来的 -

尝试在 Vue 3 中使用 Fragments，但它们不起作用。

这是我的代码

<template>
  <div class="container">
    <div v-if="tab === 'options'">
      <Options />
    </div>
    <div v-else-if="tab === 'updates'">
      <Updates />
    </div>
    <div v-else-if="tab === 'account'">
      <Account />
    </div>
  </div>
  <md-bottom-bar md-type="shift">
    <md-bottom-bar-item
      @click="($event) => changeTab($event, 'options')"
      id="bottom-bar-item-options"
      md-label="Options"
      md-icon="home"
    />
    <md-bottom-bar-item
      @click="($event) => changeTab($event, 'updates')"
      id="bottom-bar-item-updates"
      md-label="Updates"
      md-icon="pages"
    />
    <md-bottom-bar-item
      @click="($event) => changeTab($event, 'account')"
      id="bottom-bar-item-account"
      md-label="Account"
      md-icon="favorite"
    />
  </md-bottom-bar>
</template>

这是错误：

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

阅读文档后，它提到：In 3.x, components now can have multiple root nodes! However, this does require developers to explicitly define where attributes should be distributed.

我认为我没有传递任何属性。在我不知情的情况下，我还能运行 Vue 2 吗？

4

1 回答 1

1

据我所见，这段代码应该在 vue3 中完美运行。所以它实际上可能是一个版本问题。

检查您的 package.json 是否有“vue”版本应该是 3.xx 将其更改为 3.xx 后，您需要运行npm install或yarn install.

还有一个小技巧，而不是多个 v-if，您可以使用动态组件：
<component :is="tab"></component>

参见：https ://vuejs.org/v3/guide/components-dynamic-async.html

于 2021-08-22T19:44:46.787 回答