如何在基于 cdn 的应用程序上的 Vue js 3 中添加样式答案

【问题标题】：How to add style in Vue js 3 on a cdn based app如何在基于 cdn 的应用程序上的 Vue js 3 中添加样式
【发布时间】：2022-07-16 09:40:13
【问题描述】：

我正在学习 Vue js。我使用 CDN 中包含的 Vue 创建了一个应用程序，我想知道如何向其中添加 <style>。

我可以将模板写成template: `<div>Vue js 3</div>` ，但是"style": " ... "字符串可以写成同样的方式添加到组件JS吗？

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
  },
  template: `<button @click="increment">count is: {{ count }}</button>`,
  // can style be written like the template above? For example, I tried:
  style: {
    button {
      background: red;
    }
  },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  },
}

【问题讨论】：

你能提供你的组件链接吗？你想编写单个文件组件吗？
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript node.js vue.js vue-component vuejs3

【解决方案1】：

我认为这应该适合你。

 <style>
  @import './yourStyles.css';
 </style>

【讨论】：

【解决方案2】：

如果该组件按钮的样式是特定的，那么您可以使用scoped 样式。

<style scoped>
  button {
    background : red;
  }
</style>

如果您想为应用程序中的所有buttons 应用通用样式，那么您可以创建一个通用样式文件，然后将其导入您想要访问的任何位置。

<style>
  @import './button.css';
</style>

演示：

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

button {
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="increment">count is: {{ count }}</button>
</div>

【讨论】：

【解决方案3】：

在你的索引文件中添加一个带有脚本类型模块的主js

在您的组件中，例如counter.js 添加

从 './styles.css' 导入工作表 assert { type: 'css' };

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。