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

时间：2018-10-18 22:38:15

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

我在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完成加载之前看起来完全没问题。

enter image description here

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

1 个答案:

答案 0 :(得分：0)

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

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

相关问题
最新问题