Integrasi AdminLTE 3.0.5 Vue
Integrasi AdminLTE 3.0.5 Vue – Pada artikel kali ini kita akan belajar Integrasi AdminLTE 3.0.5 menggunakan Vue CLI.
Integrasi AdminLTE 3.0.5 Vue
Create Project
Buat project baru dengan nama vue-adminlte-3.0.5.
Dari command prompt ketikkan perintah berikut:
|
1 2 3 4 5 |
cd H:\sourcecode npm install -g @vue/cli vue create vue-adminlte-3.0.5 |
Install Dependency
Selanjutnya masuk ke direktori project dan install dependency menggunakan perintah berikut:
|
1 2 3 4 |
cd vue-adminlte-3.0.5 npm install vue-resource vuex vue-router --save |
Download AdminLTE 3.0.5
Selanjutnya kita download AdminLTE 3.0.5 disini:
Kemudian kita ekstrak file AdminLTE 3.0.5.zip ke directory project kita pada folder public. Setelah itu rename folder AdminLTE 3.0.5 menjadi assets.
Configuration
main.js
Buka file main.js pada folder src, kemudian edit menjadi seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import Vue from 'vue' import VueRouter from 'vue-router' import routes from './routes'; Vue.use(VueRouter); import App from './App.vue' Vue.config.productionTip = false const router = new VueRouter({routes}); new Vue({ router, render: h => h(App), }).$mount('#app') |
Simpan file main.js
App.vue
Buka file App.vue, kemudian edit menjadi seperti berikut:
|
1 2 3 4 5 6 7 8 9 |
<template> <router-view /> </template> <script> export default {} </script> |
Simpan file App.vue
routes.js
Buat file baru dengan nama routes.js pada folder src, kemudian ketikkan script berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import Home from './components/Home.vue' import About from './components/About.vue' const routes = [ { name: '/', path: '/', component: Home }, { name: 'home', path: '/home', component: Home }, { name: 'about', path: '/about', component: About } ]; export default routes |
Simpan file routes.js
Template
Buat folder baru dengan nama _layouts pada direktory src/components untuk meletakkan file template Navbar, Sidebar dan Footer.
Navbar.vue
Buat file baru dengan nama Navbar.vue pada folder src/components/_layouts kemudian ketikkan script berikut:
Simpan file Navbar.vue
Sidebar.vue
Buat file baru dengan nama Sidebar.vue pada folder src/components/_layouts kemudian ketikkan script berikut:
Simpan file Sidebar.vue
Footer.vue
Buat file baru dengan nama Footer.vue pada folder src/components/_layouts kemudian ketikkan script berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div id="footer"> <footer class="main-footer"> <strong>Copyright © 2020 <a href="https://www.cacan.id" target="_blank" rel="noopener noreferrer">cacan</a>.</strong> All rights reserved. <div class="float-right d-none d-sm-inline-block"> <b>Version</b> 3.0.5 </div> </footer> </div> </template> <script> export default {} </script> |
Simpan file Footer.vue
index.html
Buka file index.html pada folder public kemudian edit menjadi seperti berikut:
Simpan file index.html
Components
Home.vue
Buat file baru dengan nama Home.vue pada folder src/components kemudian ketikkan script berikut:
Simpan file Home.vue
About.vue
Buat file baru dengan nama About.vue pada folder src/components kemudian ketikkan script berikut:
Simpan file About.vue
Testing
Dari command prompt jalankan Vue.js dengan menggunakan perintah berikut:
|
1 2 3 |
npm run serve --watch |
Kemudian buka browser dan ketikkan URL http://localhost:8080
Sampai disini kita sudah berhasil membuat Integrasi adminLTE 3.05 menggunakan Vue. Pada artikel selanjutnya kita akan bahas Vue.js lebih jauh lagi.
Semoga bermanfaat.
Source Code bisa anda download disini:
