如何从 laravel 后端仪表板拆分 vuejs 组件的设计
Posted
技术标签:
【中文标题】如何从 laravel 后端仪表板拆分 vuejs 组件的设计【英文标题】：How can I split design of vuejs component from laravel backend dashboard 【发布时间】：2020-10-05 00:28:22 【问题描述】：我正在使用将 Vuejs 组件呈现为刀片 laravel 的 laravel 应用程序，它呈现组件但它受 laravel 后端的 CSS 设计的影响，因为我在后端部分预览组件，我的问题是如何拆分 CSS从 laravel CSS 设计后端设计我的 Vuejs 组件？
header-component.vue
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</template>
<style scoped>
.container
width: 960px;
margin:auto;
</style>
<style>
@import '/../frontend/css/all.css';
@import '/../frontend/css/Animate.css';
@import '/../frontend/css/bootstrap.min.css';
@import '/../frontend/css/owl.carousel.min.css';
@import '/../frontend/css/responsive.css';
@import '/../frontend/css/style.css';
.main-header
position: relative;
.parellex
margin-top: -125px;
</style>
header.blade.php
@extends('master.app')
@section('content')
<div style="overflow:auto; position:relative; top: 30px; left:0; right:0; bottom:0" class="mr-5 ml-5">
<header-component></header-component>
</div>
@endsection
app.blad.php
<html lang="str_replace('_', '-', $lang = app()->getLocale()) " dir=' $lang=="ar"? "rtl" : "ltr" ' style="--primarycolor:#17b3a3;">
<head>
-- dd($lang, Cookie::get('lang')) --
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content=" csrf_token() ">
<title> config('app.name', 'MyApp') </title>
<?php $dir = $lang == "ar"? "rtl":"ltr" ?>
<!-- START: Template CSS-->
<link rel="stylesheet" href=" asset('backend/'.$dir.'/vendors/bootstrap/css/bootstrap.min.css') ">
<link rel="stylesheet" href=" asset('backend/'.$dir.'/vendors/jquery-ui/jquery-ui.min.css') ">
<link rel="stylesheet" href=" asset('backend/'.$dir.'/vendors/jquery-ui/jquery-ui.theme.min.css') ">
<link rel="stylesheet" href=" asset('backend/'.$dir.'/vendors/simple-line-icons/css/simple-line-icons.css') ">
<link rel="stylesheet" href=" asset('backend/'.$dir.'/vendors/flags-icon/css/flag-icon.min.css') ">
<link rel="stylesheet" href=" asset('backend/'.$dir.'/vendors/flag-select/css/flags.css') ">
<!-- END Template CSS-->
<body id="main-container" class="default light small-menu-icon">
<div id="app">
<!-- START: Main Content-->
<main>
<div class="container-fluid">
@include('flash::message')
<!-- START: Breadcrumbs-->@auth
@include('master.partials.breadcrumbs')
<!-- END: Breadcrumbs-->@endauth
@yield('content')
</div>
</main>
<!-- END: Main Content-->
</div>
</body>
</html>
所以我的问题是如何在后端和前端（Vuejs 组件）之间拆分设计？ 任何想法或提示，我将不胜感激。
【问题讨论】：
【参考方案1】：样式范围
您可以从定义每个 Vuejs 组件的样式开始
<style scoped>
.foo
background: red
</style>
使用 Webpack
在您的webpack.mix.js 中，您需要拆分资源。
mix.styles(['resources/css/frontend.css'], 'public/css/frontend.css')
mix.styles(['resources/css/backend.css'], 'public/css/backend.css')
在你的 Laravel 应用程序中使用它
<!-- Inside backend layout -->
<link rel="stylesheet" href=" mix('css/backend.css') ">
<!-- Inside frontend layout -->
<link rel="stylesheet" href=" mix('css/frontend.css') ">
【讨论】：
谢谢@Darick，正如你所说，我遵循Webpack 的工作方式，后端不会影响前端（Vuejs 的一个组件），但是前端它会影响后端怎么可能我愿意吗？
您只需要隔离您的布局并确保您的前端样式不会影响您的后端。您是否在后端重用您的组件？
不用，我只需要通过后台编辑我的主题，在后台预览主题，更新logo、菜单、联系我们等等。
您可以在后端合并您需要的样式。 ``` mix.styles(['resources/css/backend.css', 'resources/css/frontend.css'], 'public/css/backend.css') ``` 如果你正在预览您的应用程序后端的前端。您可能想要这样做。
有什么方法可以让我想象你现在在做什么。我很乐意提供帮助【参考方案2】：
不确定哪些部分正在战斗。您正在加载的所有库或组件的自定义代码。
首先我会尝试只加载一次库。例如，您可能只需要一份引导程序。
其次，如果它是正在战斗的组件代码（例如main-header），您可以将scoped 添加到您的Vue 样式标签中。这使得样式和类对于该组件是独一无二的。
但是，我不确定如果您将所有这些导入也限定在组件范围内会发生什么。
我认为你最好将所有这些库组件加载到整个 Vue 项目中（导入 main.js）而不是组件本身。这样您就可以根据您使用的环境有条件地加载内容。
【讨论】：
感谢您的回复，但我无法找到您@Bryce Howitson以上是关于如何从 laravel 后端仪表板拆分 vuejs 组件的设计的主要内容，如果未能解决你的问题，请参考以下文章