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

【问题标题】：Split template, script and styles (HTML, JS and CSS) in nuxt.js component files在 nuxt.js 组件文件中拆分模板、脚本和样式（HTML、JS 和 CSS）
【发布时间】：2018-11-29 17:14:32
【问题描述】：

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

理想情况下，我可以定义：

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

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

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

您需要像 vue docs 中描述的那样手动进行操作

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

【讨论】：