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:

Gbr1 Integrasi AdminLTE 3.0.5 Vue - Vue CLI Option
Gbr1 Integrasi AdminLTE 3.0.5 Vue – Vue CLI Option

 

Install Dependency

Selanjutnya masuk ke direktori project dan install dependency menggunakan perintah berikut:

 

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:

Simpan file main.js

 

App.vue

Buka file App.vue, kemudian edit menjadi seperti berikut:

Simpan file App.vue

 

routes.js

Buat file baru dengan nama routes.js pada folder src, kemudian ketikkan script berikut:

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:

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:

Kemudian buka browser dan ketikkan URL http://localhost:8080

Gbr2 Integrasi AdminLTE 3.0.5 Vue – Testing
Gbr2 Integrasi AdminLTE 3.0.5 Vue – Testing

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:

Dewaweb Gives Your Website Only the Best!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *