Chào mừng đến với Cafedev! Trong bài viết này, chúng tôi sẽ hướng dẫn bạn bắt đầu nhanh chóng với Vue.js. Nếu bạn đang muốn tìm hiểu về Vue và muốn bắt đầu nhanh chóng, đừng bỏ qua phần này. Chúng tôi sẽ hướng dẫn bạn qua các bước cơ bản để bắt đầu phát triển ứng dụng Vue trên máy tính cục bộ của bạn. Hãy cùng khám phá cách tạo ứng dụng Vue một cách nhanh chóng và dễ dàng!
Nội dung chính
1. Thử Vue Trực Tuyến
- Để nhanh chóng trải nghiệm Vue, bạn có thể thử trực tiếp trên Playground của họ.
- Nếu bạn muốn một bản cài đặt HTML đơn giản mà không cần bất kỳ bước xây dựng nào, bạn có thể sử dụng JSFiddle này làm điểm khởi đầu của bạn.
- Nếu bạn đã quen thuộc với Node.js và khái niệm về các công cụ xây dựng, bạn cũng có thể thử cài đặt hoàn chỉnh ngay trong trình duyệt của mình trên StackBlitz.
2. Tạo Ứng Dụng Vue
Mẹo Yêu Cầu Tiên Quyết
– Sự quen thuộc với việc dùng các dòng lệnh trong terminal or CMD
– Cài đặt Node.js phiên bản 18.3 trở lên
Trong phần này, chúng tôi sẽ giới thiệu cách tạo một Ứng Dụng Trang Đơn Vue trên máy cục bộ của bạn. Dự án được tạo sẽ sử dụng một bản cài đặt xây dựng dựa trên Vite và cho phép chúng tôi sử dụng các Single-File Components của Vue (SFCs).
Đảm bảo bạn đã cài đặt phiên bản mới nhất của Node.js và thư mục làm việc hiện tại của bạn là thư mục mà bạn dự định tạo dự án. Chạy lệnh sau trong terminal or CMD của bạn (không có dấu $):
Dưới đây là nhiều cách khác nhau để chạy lệnh tạo project Vue
$ npm create vue@latest$ pnpm create vue@latest$ yarn create vue@latest$ bun create vue@latestLệnh này sẽ cài đặt và thực thi create-vue, một công cụ xây dựng dự án từ chính Vue cung cấp. Bạn sẽ nhận được các lời nhắc cho một số tính năng tùy chọn như TypeScript và hỗ trợ kiểm thử:
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
Scaffolding project in ./<your-project-name>...
Done.
Nếu bạn không chắc chắn về một tùy chọn nào đó, chỉ cần chọn No bằng cách nhấn Enter tạm thời. Khi dự án được tạo, làm theo hướng dẫn để cài đặt các phụ thuộc và khởi động máy chủ phát triển:
Dưới đây là nhiều cách khác nhau để chạy lệnh:
$ cd {{'<your-project-name>'}}
$ npm install
$ npm run dev
$ cd {{'<your-project-name>'}}
$ pnpm install
$ pnpm run dev
$ cd {{'<your-project-name>'}}
$ yarn
$ yarn dev
$ cd {{'<your-project-name>'}}
$ bun install
$ bun run devBạn đã có dự án Vue đầu tiên của mình hoạt động rồi! Lưu ý rằng các thành phần ví dụ trong dự án được tạo ra được viết bằng Composition API và <script setup>, thay vì Options API. Dưới đây là một số mẹo bổ sung:
– Cài đặt IDE được khuyến nghị là Visual Studio Code + Tiện ích mở rộng chính thức của Vue. Nếu bạn sử dụng các trình soạn thảo khác, hãy xem Phần hỗ trợ IDE.
– Chi tiết về các công cụ, bao gồm tích hợp với các framework backend, được thảo luận trong Hướng Dẫn Công Cụ.
– Để tìm hiểu thêm về công cụ xây dựng Vite, hãy xem tài liệu Vite.
– Nếu bạn chọn sử dụng TypeScript, hãy xem Hướng Dẫn Sử Dụng TypeScript.
Khi bạn sẵn sàng triển khai ứng dụng của mình lên production, hãy chạy lệnh sau(Dưới đây là cách chạy nhiều lệnh):
$ npm run build$ pnpm run build$ yarn build$ bun run buildĐiều này sẽ tạo ra một bản xây dựng production cho ứng dụng của bạn trong thư mục ./dist của dự án. Để biết thêm thông tin về cách triển khai ứng dụng của bạn lên production, hãy xem Hướng Dẫn Triển Khai Production.
3. Sử Dụng Vue từ CDN
Bạn có thể sử dụng Vue trực tiếp từ CDN thông qua thẻ script:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Ở đây, chúng tôi sử dụng unpkg, nhưng bạn cũng có thể sử dụng bất kỳ CDN nào cung cấp các gói npm, ví dụ như jsdelivr hoặc cdnjs. Tất nhiên, bạn cũng có thể tải tệp này và tự mình phục vụ.
Khi sử dụng Vue từ một CDN, không có “bước xây dựng” nào được thực hiện. Điều này làm cho cài đặt đơn giản hơn nhiều và phù hợp để tăng cường HTML tĩnh hoặc tích hợp với một framework backend. Tuy nhiên, bạn sẽ không thể sử dụng cú pháp Single-File Component (SFC).
3.1 Sử Dụng Build Toàn Cục
Liên kết trên tải build toàn cục của Vue, nơi tất cả các API cấp cao được tiết lộ như các thuộc tính trên đối tượng Vue toàn cầu. Dưới đây là một ví dụ đầy đủ sử dụng build toàn cục:
Code theo kiểu options:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>Code theo kiểu Composition:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>3.2 Sử Dụng Build ES Module
Trong toàn bộ tài liệu, họ sẽ chủ yếu sử dụng cú pháp ES modules. Hầu hết các trình duyệt hiện đại bây giờ hỗ trợ ES modules một cách tự nhiên, vì vậy chúng ta có thể sử dụng Vue từ một CDN thông qua ES modules native như sau:
Code theo kiểu options:
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>Code theo kiểu Composition:
<div id="app">{{ message }}</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>3.3 Bật Import Maps
Trong ví dụ trên, chúng tôi đang import từ URL CDN, nhưng trong phần còn lại của tài liệu, bạn sẽ thấy mã như sau:
import { createApp } from 'vue'Chúng ta có thể chỉ cho trình duyệt biết nơi tìm vue import bằng cách sử dụng Import Maps:
Code theo kiểu options:
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>Code theo kiểu Composition:
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp, ref } from 'vue'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>Bạn cũng có thể thêm các mục cho các phụ thuộc khác vào Import Maps – nhưng hãy đảm bảo chúng trỏ đến phiên bản ES modules của thư viện bạn dự định sử dụng.
TIP: Trình Duyệt Hỗ trợ Import Maps
Import Maps là một tính năng trình duyệt tương đối mới. Đảm bảo sử dụng một trình duyệt có hỗ trợ của nó. Đặc biệt, nó chỉ được hỗ trợ trong Safari 16.4+.
Chú Ý Khi Sử Dụng Trong Môi Trường Sản Xuất Các ví dụ cho đến nay đều sử dụng bản phát triển của Vue – nếu bạn dự định sử dụng Vue từ một CDN khác trong môi trường sản xuất, hãy đảm bảo kiểm tra Hướng Dẫn Triển Khai Sản Xuất.
Mặc dù có thể sử dụng Vue mà không cần một xây dựng hệ thống, một cách tiếp cận thay thế để xem xét là sử dụng vuejs/petite-vue có thể phù hợp hơn với ngữ cảnh mà jquery/jquery (trong quá khứ) hoặc alpinejs/alpine (trong hiện tại) có thể được sử dụng thay vào đó.
3.4 Chia Nhỏ Các Module
Khi chúng ta đi sâu vào hướng dẫn, có thể chúng ta cần phải chia mã của mình thành các tệp JavaScript riêng biệt để dễ quản lý hơn. Ví dụ:
<!-- index.html -->
<div id="app"></div>
<script type="module">
import { createApp } from 'vue'
import MyComponent from './my-component.js'
createApp(MyComponent).mount('#app')
</script>Code theo kiểu options:
// my-component.js
export default {
data() {
return { count: 0 }
},
template: `<div>count is {{ count }}</div>`
}Code theo kiểu Composition:
// my-component.js
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
},
template: `<div>count is {{ count }}</div>`
}Nếu bạn mở index.html ở trên trực tiếp trong trình duyệt của bạn, bạn sẽ thấy rằng nó sẽ gây ra lỗi vì các ES modules không thể hoạt động qua giao thức file://, đây là giao thức trình duyệt sử dụng khi bạn mở một tệp cục bộ.
Do lý do bảo mật, ES modules chỉ có thể hoạt động qua giao thức http://, đây là giao thức mà trình duyệt sử dụng khi mở các trang web. Để ES modules có thể hoạt động trên máy tính cục bộ của chúng ta, chúng ta cần phải load index.html qua giao thức http://, với một máy chủ HTTP cục bộ.
Để bắt đầu một máy chủ HTTP cục bộ, đầu tiên đảm bảo rằng bạn đã cài đặt Node.js, sau đó chạy npx serve từ dòng lệnh trong cùng một thư mục nơi tệp HTML của bạn. Bạn cũng có thể sử dụng bất kỳ máy chủ HTTP nào khác có thể phục vụ các tệp tĩnh với các loại MIME đúng.
Bạn có thể đã nhận thấy rằng mẫu của các thành phần được nhập như một chuỗi JavaScript. Nếu bạn đang sử dụng VS Code, bạn có thể cài đặt tiện ích mở rộng es6-string-html và thêm tiền tố /*html*/ vào các chuỗi để nhận được sự tô màu cú pháp cho chúng.
4. Bước Tiếp Theo
Nếu bạn đã bỏ qua Giới Thiệu, chúng tôi mạnh mẽ khuyên bạn đọc nó trước khi tiếp tục đến phần còn lại của tài liệu.
Trong bài viết này, chúng tôi đã cung cấp cho bạn một bắt đầu nhanh chóng với Vue.js trên Cafedev. Bằng cách làm theo các hướng dẫn và ví dụ, hy vọng bạn đã có được kiến thức cơ bản để bắt đầu xây dựng ứng dụng Vue của riêng mình. Hãy tiếp tục khám phá và phát triển kỹ năng của mình trong việc sử dụng Vue để tạo ra các ứng dụng web tuyệt vời trên nền tảng Cafedev!
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
