Question

<template>
  <div>
    <sidnav></sidnav>
    <topnav></topnav>
  </div>
</template>

<script>
  import sidnav from '@/components/sidnav.vue'
  import topnav from '@/components/topnav.vue'
  export default {
    components: {
      sidnav,
      topnav
    }
  }
</script>

这是仪表板主页，它将路由throw sidenav和topnav

我正在尝试使用VueJS创建管理面板。我可以登录并在js中加载css和index.html 但是当我制作仪表板时，我不知道如何加载或仅包含仪表板的css和js。

有没有办法将'js'和'css'l enter code here墨水包含在仪表板主页中。

Answer 1

你有几个选择，vue开发人员建议的一件事就是让所有相关的css都包含.vue文件：

<template>
  <div class="someselector">
    <sidnav></sidnav>
    <topnav></topnav>
  </div>
</template>

<script>
...
</script>

<style>
.someselector {
...
}
</style>

然后在sidnav.vue中，与css相同的风格。

无论如何，如果你想要包含一个css文件，你可以做

<style>
   @import 'YOURPATH/to/file.css';
</style>

现在，如果你想要的是导入/需要一个文件（js或css）并在你的bundle文件夹中“自动”调用，那么你需要更具体，共享webpack或gulp配置等。< / p>

Answer 2

您可以生成两个单独的构建文件（使用webpack或gulp），一个用于主应用程序，另一个用于管理面板。之后，您只能在管理页面中导入管理包。 css的另一个解决方案是将css嵌入到管理面板组件内的样式标记中。

如何在某些页面中包含vuejs中的css js

2 个答案: