vue3模板分离与脚本设置

Question

我目前正在将一个Vue2项目迁移到Vue3。使用Vue2，我的组件部件总是被分割成单独的文件。例如，组件的Vue模板从不同的源文件加载，如下所示：

// public-main.vue
<template src="./public-main.html" lang="html"></template>
<script src="./public-main.js"></script>
<style src="./public-main.scss" lang="scss"></style>

我知道“真正的”vue迷不喜欢分割它所反对的模板。但是我喜欢它，因为我的美学是扭曲的。

输入vue3，这是一个漂亮的新脚本设置标记。尽管我很容易上当，但我做了一个简短的尝试：

// public-main.vue
<template src="./public-main.html" lang="html"></template>
<script src="./public-main.js"></script>
<script setup src="./public-main-setup.js"></script>
<style src="./public-main.scss" lang="scss"></style>

当然，这是行不通的。Vue3向我抛出了这个错误：

<script> cannot use the "src" attribute when <script setup> is also present because they must be processed together.
SyntaxError: <script> cannot use the "src" attribute when <script setup> is also present because they must be processed together.

所以再见模板分裂，我想.

..。或者.有什么方法可以继续使用分割的模板文件吗？

Answer 1

<script setup>只适用于单个文件组件。它不能与src属性一起使用。所以是的，不再有模板分裂了。

来源