Cài Đặt Môi Trường Phát Triển Vue.js

Giới thiệu Node.js và npm

Node.js là môi trường thực thi JavaScript phía server, cho phép thực hiện các tác vụ như thao tác file hệ thống và xây dựng API backend. npm (Node Package Manager) là công cụ quản lý thư viện cho JavaScript, tương tự Maven trong Java, giúp quản lý dependencies mà không cần sử dụng thẻ script.

Cài Đặt Node.js

Tải Node.js từ trang chính thức: https://nodejs.org/. Sau khi tải, giải nén và thiết lập biến môi trường PATH.

Cấu hình npm Mirror

npm config set registry https://registry.npm.taobao.org

Hoặc sử dụng nrm để quản lý multiple registries:

npm install -g nrm
nrm use taobao

Làm Việc với Vue CLI

Cài Đặt Vue CLI

npm install -g @vue/cli

Kiểm tra phiên bản:

vue --version

Tạo Dự Án Vue Mới

vue create ten-du-an

Lưu ý: Tên dự án không được chứa ký tự đặc biệt hoặc chữ hoa.

Cấu Trúc Thư Mục Dự Án

Dự án được tạo bao gồm các thư mục chính: public, src, components, router, và file package.json quản lý dependencies.

Component trong Vue

Định Nghĩa Component

Component trong Vue là các khối giao diện độc lập, có thể tái sử dụng. Mỗi component bao gồm template, script và style.

<template>
  <div>
    <h2>Tên: {{ userName }}</h2>
    <h2>Tuổi: {{ userAge }}</h2>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  data() {
    return {
      userName: 'Nguyễn Văn A',
      userAge: 25
    }
  }
}
</script>

<style scoped>
</style>

Đăng Ký và Sử Dụng Component

Component có thể được đăng ký cục bộ trong một component khác hoặc toàn cục trong main.js.

import UserProfile from './components/UserProfile.vue'

export default {
  components: {
    UserProfile
  }
}

Định Tuyến (Routing) với Vue Router

Cài Đặt Vue Router

npm install vue-router@3

Cấu Hình Router

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from '../views/HomePage.vue'
import AboutPage from '../views/AboutPage.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/about',
    component: AboutPage
  }
]

export default new VueRouter({
  routes
})

Sử Dụng Router trong Ứng Dụng

<router-link to="/">Trang Chủ</router-link>
<router-link to="/about">Giới Thiệu</router-link>
<router-view></router-view>

Xử Lý HTTP Requests với Axios

Cài Đặt Axios

npm install axios

Gọi API trong Component

import axios from 'axios'

export default {
  methods: {
    fetchUserData() {
      axios.get('/api/users')
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}

Integrating UI Frameworks: Element UI

Cài Đặt Element UI

npm install element-ui

Sử Dụng Element UI Components

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Ví dụ sử dụng Button component:

<el-button type="primary">Nút Chính</el-button>