时间戳

首页 > 解决方案 > 如何在一个 Vuejs 项目中使用多个模板？

javascript - 如何在一个 Vuejs 项目中使用多个模板？

问题描述

我在 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 文件都不起作用。

标签： javascripthtmlcssnode.jsvue.js

解决方案

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

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

推荐阅读