Vuews：一个应用程序中的多个CSS模板

hrysbysz 于 2022-12-04 发布在 Vue.js

关注(0)|答案(1)|浏览(123)

我是Vuejs的初学者。我如何在一个应用程序中有多个模板？
例如，对于登录页面，我想使用Flatkit模板，对于管理 Jmeter 板，我想使用其他模板（ Jmeter 板）。我如何在一个应用程序中合并这些模板？在我的index.html文件中，我已经插入了Flatkit元素，但当我插入 Jmeter 板元素时，CSS不工作。如何组合这些链接和脚本元素
图示项目流程

index.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>

  <!-- LOGIN TEMPLATE -->
  <!-- for ios 7 style, multi-resolution icon of 152x152 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
  <link rel="apple-touch-icon" href="./Flatkit/assets/images/logo.png">
  <meta name="apple-mobile-web-app-title" content="Flatkit">

  <!-- for Chrome on Android, multi-resolution icon of 196x196 -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" sizes="196x196" href="./Flatkit/assets/images/logo.png">

  <!-- style -->
  <link rel="stylesheet" href="./Flatkit/assets/animate.css/animate.min.css" type="text/css" />
  <link rel="stylesheet" href="./Flatkit/assets/glyphicons/glyphicons.css" type="text/css" />
  <link rel="stylesheet" href="./Flatkit/assets/font-awesome/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="./Flatkit/assets/material-design-icons/material-design-icons.css" type="text/css" />

  <link rel="stylesheet" href="./Flatkit/assets/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
  <!-- build:css ../assets/styles/app.min.css -->
  <link rel="stylesheet" href="./Flatkit/assets/styles/app.css" type="text/css" />
  <!-- endbuild -->
  <link rel="stylesheet" href="./Flatkit/assets/styles/font.css" type="text/css" />

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  
  <!-- built files will be auto injected -->

  <!-- build:js scripts/app.html.js -->
  <!-- jQuery -->
  <script src="./Flatkit/libs/jquery/jquery/dist/jquery.js"></script>
  <!-- Bootstrap -->
  <script src="./Flatkit/libs/jquery/tether/dist/js/tether.min.js"></script>
  <script src="./Flatkit/libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
  <!-- core -->
  <script src="./Flatkit/libs/jquery/underscore/underscore-min.js"></script>
  <script src="./Flatkit/libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
  <script src="./Flatkit/libs/jquery/PACE/pace.min.js"></script>

  <script src="./Flatkit/scripts/config.lazyload.js"></script>

  <script src="./Flatkit/scripts/palette.js"></script>
  <script src="./Flatkit/scripts/ui-load.js"></script>
  <script src="./Flatkits/cripts/ui-jp.js"></script>
  <script src="./Flatkit/scripts/ui-include.js"></script>
  <script src="./Flatkit/scripts/ui-device.js"></script>
  <script src="./Flatkit/scripts/ui-form.js"></script>
  <script src="./Flatkit/scripts/ui-nav.js"></script>
  <script src="./Flatkit/scripts/ui-screenfull.js"></script>
  <script src="./Flatkit/scripts/ui-scroll-to.js"></script>
  <script src="./Flatkit/scripts/ui-toggle-class.js"></script>

  <script src="./Flatkitscripts/app.js"></script>

  <!-- ajax -->
  <script src="./Flatkit/libs/jquery/jquery-pjax/jquery.pjax.js"></script>
  <script src="./Flatkit/scripts/ajax.js"></script>
  <!-- endbuild -->

 </body>

</html>

vue.js

来源：https://stackoverflow.com/questions/74668392/vuejs-multiple-css-template-in-one-application

1条答案

按热度按时间

lymnna711#

如果你的主脚本完全不同，你可以使用两个不同的主html页面。2你可以在后台配置它。
另一种方法是在html文件中只添加常见的脚本和样式。并在组件中使用您指定范围的样式。在“script”标记下面的“style”标记中添加每个组件的样式。使用以下命令使样式指定范围：
VUE组件：

<template>
</template>

<script>
<script>

<style scoped>
    /* your style */ 
</style>

此样式的范围仅适用于当前组件。

赞(0）回复(0）举报 2022-12-04

我来回答

Vuews：一个应用程序中的多个CSS模板

1条答案

相关问题

热门标签

最新问答