Javascript vue.js代码、模板和css在单独的文件中

我想将我的vue组件拆分为包含css（SCS）、模板和代码的单独文件。到目前为止，我的解决方案是：

js代码：

import Vue from 'vue';
import template from './template.vue';
import style from './style.vue';

import SubComponent from './SubComponent';

const component = {
  components: {
    SubComponent,
  },
  // other stuff like methods, watch ...
};
export default Vue.component('Component', {
  ...component,
  ...template,
  ...style,
});

css：

<style lang="scss">
some-class {
  background: green;
}
</style>

在Component.js中：

import Vue from 'vue';
import template from './template.vue';
import style from './style.module.scss';

import SubComponent from './SubComponent';

const component = {
  components: {
    SubComponent,
  },
  data: () => ({ style }),
  // other stuff like methods, watch ...
};
export default Vue.component('Component', {
  ...component,
  ...template,
  ...style,
});

和template.vue：

<template>
  <div v-bind:class="[style.someClass]">
    <SubComponent />
  </div>
</template>

我不建议尝试以下方法：

<template src="./path/component.html" />
<script src="./path/component.vue" />
<style lang="scss" src="./path/component.scss />

您可以在index.html fileconst Foo=（）=>import（/*webpackChunkName:“group Foo”*/'./Foo.vue'）中包含常见的css。这是写在路由文件中的。@HMR以前有人问过类似的问题，下面是他们的讨论@vue/cli3.0使用webpack@HMR这里是一个创建vue-cli2.0的示例，但它是中文的，您可以参考它。您可以在index.html fileconst Foo=（）=>import（/*webpackChunkName:“groupfoo”*/'./Foo.vue”）中包含常见的css。这写在路由文件中。@HMR的人以前也问过类似的问题，这里是他们的讨论@vue/cli3.0 use webpack@HMR这里是创建vue-cli2.0的一个例子，但它是中文的，您可以参考它
<template>
  <div v-bind:class="[style.someClass]">
    <SubComponent />
  </div>
</template>

<template src="./path/component.html" />
<script src="./path/component.vue" />
<style lang="scss" src="./path/component.scss />