如何在一个 Vuejs 项目中使用多个模板？答案

【问题标题】：How do I use multiple templates in one Vuejs project?如何在一个 Vuejs 项目中使用多个模板？
【发布时间】：2019-03-23 19:47:52
【问题描述】：

我在 vuejs 中遇到了一些问题。问题是我试图在我的 vue 项目中加载多个模板。每个组件都必须加载自己的 css 文件。为此，我能想到的就是将每个模板 css 放在静态文件夹内的文件夹中。这是索引html

<div id="app"></div>

在每个组件中，我从静态文件夹中加载了带有 css 的 head 标签

<template>
  <html>
    <head>
      <title> site </title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1">
     
      <link rel="shortcut icon" href="static/search/favicon.ico">
      <link rel="apple-touch-icon-precomposed" href="static/search/favicon.ico">
      <link rel="stylesheet" id="brk-direction-bootstrap" href="static/search/css/bootstrap.css">
      
      <!-- etc etc -->
     
    </head>

    <body>
      <!-- ... -->
    </body>
  </html>
</template>

这就是我解决在一个项目中加载不同 css 模板的方法。但这使得页面加载出现问题，在 css 完成加载之前它看起来完全关闭。

我不确定我该如何解决！调用 index.html 中的所有 css 文件都不行。

【问题讨论】：

Vue 文件中可以有 <style> 块；您是否考虑过将这些用于每个组件的样式？
但在那些我不能包含文件？是的，让我试试
您可以使用@import来导入CSS文件。
好像不行！！可能与加载器配置有关，我会坚持下去。

标签： javascript html css node.js vue.js

【解决方案1】：

正如@puddi 所说，在您的组件中使用<style> 标签。似乎最适合您的需求的是使用范围样式<style scoped>，这意味着您在其中包含的css 仅适用于该组件，而不适用于全局。

根据您想要获得的冒险程度，您可以在Nuxt.js（vue 的包装器）中构建您的项目，它允许您定义完全符合您要求的布局。

【讨论】：

好吧，就像@puddi 说的！我能够导入css文件。但只有一个使用并且我必须将所有 css 放在一个文件中并包含它。我无法加载许多 css 文件，所以我会在短时间内修复它！我想我没有合适的加载器来导入很多！我会继续努力的