Ở bài trước chúng ta đã làm xong các items sau:
- Layout
- Components
- Ráp các components vào layout
Tiếp theo mình sẽ hướng dẫn các bạn đưa Boostrap vào và style cho đẹp nhé. Nào Start thôi
Thêm Boostrap & File style
Thêm file admin.css này vào folder public\css\
Mở file public\index.html ra và nhúng các thư viện boostrap cũng như font-awesome vào
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="<%= BASE_URL %>css/admin.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</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 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
></script>
</body>
</html>
Sửa component Header
<template>
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="/">
Demo Admin Dashboard
</a>
<ul
class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0 navbar-nav"
>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
id="userDropdown"
href="#"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="fas fa-user fa-fw"></i>
</a>
<div
class="dropdown-menu dropdown-menu-right"
aria-labelledby="userDropdown"
>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Activity Log</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</nav>
</template>
Sửa component Sidebar
<template>
<div id="layoutSidenav_nav">
<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
<div class="sb-sidenav-menu">
<div class="nav">
<div class="sb-sidenav-menu-heading">Home</div>
<a class="nav-link" href="/">
<div class="sb-nav-link-icon">
<i class="fas fa-tachometer-alt"></i>
</div>Dashboard
</a>
<div class="sb-sidenav-menu-heading">Result</div>
<a
class="nav-link"
href="/list-page"
>
<div class="sb-nav-link-icon">
<i class="fas fa-table"></i>
</div>List Page
</a>
</div>
</div>
<div class="sb-sidenav-footer">
<div class="small">Logged in as:</div>webkhoiviet.com
</div>
</nav>
</div>
</template>
Sửa component Footer
<template>
<footer class="py-4 bg-light mt-auto">
<div class="container-fluid">
<div class="d-flex align-items-center justify-content-between small">
<div class="text-muted">Copyright © 2020 webkhoiviet.com</div>
</div>
</div>
</footer>
</template>
Sửa src\layout\AdminDashboard.vue
<template>
<div>
<Header />
<div id="layoutSidenav">
<SideBar />
<div id="layoutSidenav_content">
<main>
<div class="container-fluid">
<!-- Page content -->
<slot name="LayoutContent" />
<!-- Page content -->
</div>
</main>
</div><!--end #layoutSidenav_content -->
<Footer />
</div><!-- end #layoutSidenav -->
</div>
</template>
<script>
import Header from '../components/common/Header.vue'
import Footer from '../components/common/Footer.vue'
import SideBar from '../components/common/SideBar.vue'
export default {
name: 'AdminDashboard',
components: {
Header,
Footer,
SideBar
}
}
</script>
Kết quả:
Ở bài tiếp theo mình sẽ hướng dẫn các bạn tích hợp điều hướng các menu trong Dashboard nhé.
