在 nuxt.js 组件文件中拆分模板、脚本和样式（HTML、JS 和 CSS）

Question

将 nuxt.js 视图、组件（和布局）拆分为单独的文件（在设计时，而不是构建后）的最佳方法是什么？对于复杂且大型的视图和组件，当我需要在模板和脚本之间切换（查找某些内容等）时，我发现它非常烦人。

理想情况下，我能够定义：

- foo.vue.html
- foo.vue.js
- foo.vue.css

让构建/生成过程完成剩下的工作。我正在使用预渲染 SPA ( nuxt generate) 的生成，因此解决方案（如果有）必须兼容。

Answer 1

您需要像 vue文档中描述的那样手动执行此操作

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>