npm install
npm run serve
npm run build
npm run lint
Bu projeyi sbadmin tasarımını vue.js ile componentlere ayırarak tasarlamak için yapıldı.
-Önce npm install -g @vue/cli ile vue.js frameworkünü proje dosyamda kurdum. Daha sonra da vue create dosya-adi ile yeni bir dosya yarattım. Derlemek için de npm run serve ile de derledim.
-Sbadmindeki bootstrap dosyalarını eklemek için public dosyasına sbadmindeki css, img, js, scss ve vendor dosyalarını ekledim. Public klasöründeki index.html dosyasına ile sbadmindeki blank.html de bulunan head kısmının aynısını kopyaladım ve de body bölümünde scripts kısımları aldım.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Blank</title>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
</body>
-Daha sonra da Sidebar menüsü için src/component dosyasının içine sidebar klasörü oluşturup onun içine componentslere böldüm.
-Kodları detaylı incelemek için src/components/SideBar/SidebarVue.vue ve diğer dosyalara bakabilirsiniz.
-Aynı şekilde sbadmindeki navbar menüsü için de src/component/NavBar klaörünün içerisine componentleri dosya olarak ekledim.
-Kodları detaylı incelemek için src/components/Navbar/NavBarVue.vue ve diğer dosyalara bakabilirsiniz.
-Daha sonra da PageContentdeki Blank yaısı için PageContent.Vue, Footer kısmı için de PageFooter.vue ve en sonunda LogoutModal comğonentlerini oluşturdum ve vue.js in ana componeti olan App.vue ya ekledim.
App.vue
<template>
<div id="page-top">
<div id="wrapper">
<SidebarVue />
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- NavBarVue Component -->
<NavBarVue />
<!-- PageContent Component -->
<PageContent />
</div>
<!-- PageFooter Component -->
<PageFooter />
</div>
</div>
</div>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<LogoutModal />
</template>
<script>
import NavBarVue from './components/NavBar/NavBarVue.vue'
import SidebarVue from "./components/SideBar/SidebarVue.vue"
import PageContent from "./components/PageContent.vue"
import PageFooter from "./components/PageFooter.vue"
import LogoutModal from "./components/LogoutModal.vue"
export default {
name: 'App',
components: {
NavBarVue,
SidebarVue,
PageContent,
PageFooter,
LogoutModal
}
}
</script>
<style>
/* #app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} */
</style>
Son Hali
<<<<<<< HEAD
=======
f405c8a49f1ac481d75573adfd391a26e04ff4b5