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

Question

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

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>

模板：

<template>
  <div class="some-class">
    <SubComponent />
  </div>
</template>

我想知道这是否是这样做的方法，或者是否有更好/常见的方法来做到这一点。

作用域 css

对于范围样式，我执行以下操作：文件：style.module.scss

someClass {
  background: green;
}

在 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,
});

和模板.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 />

该指南提供了一个示例，其中模板没有 src 属性，这里是 Evan 说你可以给它一个 src 属性，但看起来它会破坏模块重新加载。

标签： javascriptvue.js