VueJS – Hướng dẫn làm Admin Dashboard – Phần 1: Khởi tạo project

1. Tạo VueJS project

vue create admin-dashboard

2. Config để có thể start project

Các bạn mở file package.json ra và edit đoạn này

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "npm run serve"
  }

3. Tạo Layout Component

3.1 Tạo “layout” folder

3.2 Tạo file AdminDashboard.vue vào folder

3.3 Code cho file AdminDashboard.vue

<template>
    <div>
        <Header />
        <SideBar />
        <slot name="LayoutContent" />
        <Footer />
    </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>

4. Tạo các Components liên quan

Tạo Header componnent

<template>
    <h1>Admin Dashboard</h1>
</template>

<script>
export default {
  name: "Header"
};
</script>

Tạo Footer component

<template>
    <footer>
        <h2>FOOTER</h2>
    </footer>    
</template>

Tạo SideBar component

<template>
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</template>

Cấu trúc thư mục như sau

*Hình 1: cấu trúc thư mục các Components*

5. Sử dụng Layout vừa tạo

<template>
  <default-layout>
    <router-view />
  </default-layout>
</template>

<script>
import DefaultLayout from "./components/layouts/DefaultLayout";

export default {
  name: "App",
  components: { DefaultLayout },
};
</script>

6. Kết quả

*Hình 2: Giao diện Dashboard chưa hoàn chỉnh*

7. Kết luận

Ở phần trên mình đã hướng dẫn các bạn tạo cấu trúc dự án và tạo các components cơ bản.

Phần tiếp theo mình sẽ hướng dẫn các bạn nhúng Boostrap 4 vào và làm cho Website sinh động hơn nhé.