Ở 2 bài trước chúng ta đã sơ bộ tìm hiểu xong Vuejs là gì và các khái niệm cơ bản trong Vue. Bài học tiếp theo này chúng tã sẽ có bước đổ móng cho tòa nhà Vuejs mà chúng ta sẽ xây. Chúng mình đang nói đến bước cài đặt Vuejs các bạn cùng theo dõi nhé!
Khả năng tương thích trình duyệt của Vuejs
Trước khi đi vào chi tiết cài đặt Vuejs chúng ta cùng tìm hiểu về khả năng tương thích trình duyệt của Vue đã nhé. Do sử dụng một số tính năng ECMAScript 5 không được hỗ trợ trên IE8 cho nên Vue không hỗ trợ IE8 và các phiên bản thấp hơn. Tuy nhiên Vue hỗ trợ mọi trình duyệt tương thích với ECMAScript 5 theo bảng dưới đây
Vue Devtools
Một addon được khuyến khích sử dụng để kiểm tra lỗi (debug) của Vue trên trình duyệt đó là Vue Devtools . Nếu có ý định nghiêm túc với Vuejs bạn nên cài add-on này trên trình duyệt của mình.
Các cách cài đặt Vuejs
Cách 1: Tải và nhúng
Mỗi version (phiên bản) của Vue sẽ có hai phiên bản, một dành cho nhà phát triển (lập trình viên) hay còn gọi là (development), vmột dành cho sản phẩm đã hoàn thiện (production). Điều này tương tự như jQuery bạn sẽ có 2 file, một file đã được nén gọn và một file chưa nén gọn.
Lưu ý: Khi sử dụng trong quá trình xây dựng dự án chúng ta nên sử dụng phiên bản development (phiên bản chưa nén) bởi vì nó không lược bỏ những dòng thông báo lỗi giúp việc debug của bạn dễ dàng hơn, sau khi hoàn thành dự án thì bạn hãy đổi sang phiên bản production.
Cách 2: Sử dụng CDN
Sử dụng CDN đơn giản là các file thử viện của Vuejs sẽ được đưa lên các server trên toàn cầu, tùy thuộc vào vị trí của bạn sẽ lựa chọn server gần nhất để cung cấp dữ liệu, giúp tốc độ tải file tốt nhất.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
Chúng ta hoàn toàn có thể xem mã nguồn của package trên npm tại https://cdn.jsdelivr.net/npm/vue/
Ngoài ra, bạn cũng có thể sử dụng unpkg hoặc cdnjs (cdnjs cần nhiều thời gian để đồng bộ nên có thể nó chưa phải phiên bản mới nhất).
Vue có nhiều bản Vue production khi publish bản production cho trang web hoặc app của bạn, thay vue.js bằng vue.min.js. Đây là bản nhỏ hơn, được tối ưu về tốc độ.
Một lưu ý khi sử dụng 2 cách này thì bạn cần chú ý rằng sẽ có 2 phiên bản, đó là phiên bản dành cho phát triển (đuôi .js) và phiên bản tối ưu dung lượng (đuôi .min.js) tùy cho việc cần hay không cần debug mà lựa chọn cho hợp lý
Cách 3: NPM (Node Package Manager)
NPM được khuyến khích sử dụng khi bạn muốn xây dựng một ứng dụng lớn với Vue. NPM được hoạt động rất tốt với các module bundler (các công cụ đóng gói module) như Webpack hoặc Browserify. Vue cũng cung cấp công cụ hỗ trợ để viết các single file component.
NPM là công cụ tạo, quản lí các gói thư viện Javascript, tức là sẽ quả lí tự động, loại bỏ các thao tác thủ công như hai cách cài vuejs trên. Chúng ta chỉ cần khai báo những thư viện cần sử dụng vào file package.json, npm sẽ sự động tải chúng về giúp bạn mà không lo thiếu sót.
Sử dụng câu lệnh sau để cài
$ npm install vue
Khi đã làm quen, bạn nên cài đặt thêm Vue-CLI (Command Line Interface) giúp nhanh chóng khởi tạo nền tảng cho các ứng dụng.
$ npm install --global vue-cli #cài đặt vue-cli $ vue init webpack my-vue # tạo một dự án mới với template "webpack" $ cd my-vue $ npm run dev #chạy server
Cách 4: CLI
Vue.js cũng cung cấp một CLI giúp nhanh chóng khởi tạo nền tảng (scaffolding) cho các ứng dụng một trang. Vue-CLI chuẩn bị sẵn các cài đặt phong phú cho một quy trình front-end hiện đại. Chỉ mất vài phút, bạn đã có thể bắt đầu xây dựng ứng dụng với các tính năng như hot-reload, tinh chỉnh code khi save (lint-on-save), và các bản build sẵn sàng để deploy lên production:
# cài đặt vue-cli $ npm install --global vue-cli # tạo một dự án mới với template "webpack" $ vue init webpack my-project # cài đặt các thư viện phụ thuộc và bắt tay vào việc! $ cd my-project $ npm run dev
Tuy nhiên CLI yêu cầu nhiều kiến thức về Node.js và các công cụ hỗ trợ. Nếu bạn mới làm quen với Vue hoặc các công cụ build, chúng mình đề nghị bạn nên xem qua hướng dẫn mà không sử dụng các công cụ build sau đó mới quay lại sử dụng CLI.
Trên đây là 4 cách cài đặt vuejs từ đơn giản đến không đơn giản. Với những ai mới tiếp xúc với Vue việc nhúng trực tiếp thư viện Vuejs là một lựa chọn đúng đắn. Các bạn hãy tùy thuộc vào nhu cầu của mình mà sử dụng nhé. Chúc các bạn thành công với Vuejs!
