Question

使用Vue Router加载组件。

请注意，我没有使用webpack或vue-loader。

这是由vue-路由器加载的示例组件

export default {
    name: 'Abc',
    template:'<div>Now .. i can't add style element here :(. So where should i add it </div>',
    data(){
        return {
             message:' new message'
        }
    },
}

我在哪里可以添加CSS样式。如果可能，我不在乎css范围。

不想使用渲染功能（https://vuejs.org/v2/guide/render-function#The-Data-Object-In-Depth）..因为创建dom结构会杀死我

Answer 1

As is stated in this answer, you can't define separate CSS in a Vue component using something like css like you can define HTML using template.

话虽这么说，您可以通过多种方式为特定组件/元素定义CSS：

范围内的CSS

您可以定义一个style范围内的组件：

App.vue

<template>
  <div id="app">
    <RedComponent/>
    <NotRedComponent/>
  </div>
</template>

<script>
import RedComponent from "./components/RedComponent";
import NotRedComponent from "./components/NotRedComponent";

export default {
  components: {
    RedComponent,
    NotRedComponent
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

RedComponent.vue

<script>
export default {
  template: "<div>I am red</div>"
};
</script>

<style scoped>
div {
  color: red;
}
</style>

NotRedComponent.vue

<script>
export default {
  template: "<div>I am not red</div>"
};
</script>

See this live here

CSS类和ID

您可以为元素提供类和ID，以便使用CSS进行选择，而只有一个单独的CSS文件。注意：这并非Vue独有。

App.vue

<script>
export default {
  name: "App",
  template: '<div><p class="red">I am red</p><p>I am not red</p></div>'
};
</script>

index.css

.red {
  color: red;
}

See this live here

您可以在任何地方（有理有据）引用此index.css文件-例如，在我的实时演示中，它是从index.html本身（类似于{{ 1}}标签即可。

内嵌样式

为此，使用反引号（`）而不是引号会使您的生活更加轻松。使用反引号的另一个好处是您可以将模板跨越多行。

App.vue

<link rel="stylesheet" type="text/css" href="index.css" />

See this live here

就我个人而言，我从来没有找到用例，即使使用vue-router，带作用域的CSS也无法解决问题，但是如果您出于某种原因不能使用它，那是一些替代选择。

Answer 2

您可以使用任何CSS库（如Bootstrap，Bulma等），并直接在模板中添加css类，如下所示。

在页面的head部分中添加引导程序引用链接，仅此而已。

template: `<div class="container">Boostrap</div>`

Answer 3

如果您需要在没有 webpack (vue-loader) 的情况下使用 .vue 文件，您可以查看 vue3-sfc-loader。

<块引用>

vue3-sfc-loader
在运行时从 html/js 动态加载 .vue 文件。没有 node.js 环境，不需要（webpack）构建步骤。

_{（免责声明：作者在这里）}

组件的vue.js自定义CSS（没有webpack和vue-loader）

3 个答案: