Tích hợp và sử dụng các khung CSS với Vue.js
Các khung CSS rất tuyệt vời vì nhiều lý do; mã được hiểu một cách phổ biến hơn, các ứng dụng web dễ bảo trì hơn và việc tạo mẫu sẽ trở thành một bước ít hơn và là một phần của quá trình phát triển. Nói chung, việc tích hợp mỗi khung công tác thường giống nhau, vì vậy quá trình cài đặt sẽ hoạt động với Bootstrap, Bulma hoặc Foundation.Các ví dụ mã trong bài đăng này sẽ được viết bằng Bootstrap 4 vì nó được sử dụng rộng rãi nhất. Tuy nhiên, các phương pháp hay nhất áp dụng cho tất cả. Đây là mục đích tổng quan chung chứ không phải là một hướng dẫn mạnh mẽ.
Thêm khung vào Vue.js
Trước khi bạn bắt đầu download khung CSS, hãy đảm bảo cài đặt và tạo một dự án mới với Vue CLI và làm theo dấu nhắc :
npm install vue-cli vue init webpack project-name Cài đặt Bootstrap 4
Sau khi bạn khởi tạo một dự án Vue mới, hãy download Bootstrap 4 với npm . Vì JavaScript của Bootstrap 4 phụ thuộc vào jQuery, bạn cũng cần cài đặt jQuery.
npm install bootstrap jquery --save Bạn cần thêm các phụ thuộc Bootstrap trong file main.js của bạn bên dưới các lần nhập Vue của bạn để nó có sẵn trên phạm vi global cho toàn bộ ứng dụng.
import './../node_modules/jquery/dist/jquery.min.js'; import './../node_modules/bootstrap/dist/css/bootstrap.min.css'; import './../node_modules/bootstrap/dist/js/bootstrap.min.js'; Nếu ứng dụng của bạn không thể xây dựng, chỉ cần cài đặt phần phụ thuộc popper.js . Sau đó, nó sẽ xây dựng đúng cách.
npm install --save popper.js Xin chúc mừng, Bootstrap 4 đã được cài đặt! Tài liệu của Bootstrap là một tài nguyên tuyệt vời để giúp bạn bắt đầu với những kiến thức cơ bản như sử dụng cột, hàng, nút, v.v.
Cài đặt Bulma
Bulma là một khung CSS nhẹ và linh hoạt dựa trên Flexbox. Nó được tạo ra bởi Jeremy Thomas và có hơn 25 nghìn sao trên GitHub tại thời điểm viết bài này.
Không giống như Bootstrap, Bulma chỉ chứa CSS, vì vậy không có jQuery hoặc JavaScript phụ thuộc.
Cài đặt Bulma:
npm install bulma Sau khi download Bulma, hãy mở main.js của bạn và nhập nó.
import './../node_modules/bulma/css/bulma.css'; Bulma hiện đã sẵn sàng để sử dụng trong ứng dụng Vue.js của bạn. Bulma Docs là một tài nguyên tuyệt vời để giúp bạn bắt đầu.
Cài đặt nền tảng
Foundation là một khuôn khổ được tạo ra bởi những người giỏi ở Zurb. Foundation có hai khuôn khổ; một cho email và một cho các trang web. Ta muốn có khuôn khổ Foundation Sites vì ta chỉ quan tâm đến việc sử dụng Foundation trong ứng dụng web của bạn .
Cài đặt Foundation Sites và nhập nó vào file main.js của bạn:
$ npm install foundation-sites --save Nhập nó vào file main.js của bạn:
import './../node_modules/foundation-sites/dist/css/foundation.min.css'; import './../node_modules/foundation-sites/dist/js/foundation.min.js'; Tài liệu Nền tảng là một nguồn tài liệu tuyệt vời để tìm hiểu những kiến thức cơ bản của khuôn khổ Quỹ của Zurb.
Thực hiện các phương pháp hay nhất với Vue
Về cốt lõi, ba khuôn khổ này rất giống nhau: chúng đều hoạt động với các hàng và cột. Các hàng và cột này tạo ra một "lưới" mà bạn có thể tận dụng để tạo giao diện user của bạn . Lưới này cho phép bạn dễ dàng thay đổi chiều rộng của các cột theo chiều rộng thiết bị, chỉ bằng cách thêm hoặc thay đổi các lớp được nối vào một phần tử.
Lưu ý: Như đã nêu trước đây, các ví dụ dưới đây đang sử dụng Bootstrap 4. Tuy nhiên, các phương pháp hay nhất này với các khung dựa trên cột hàng sẽ áp dụng cho tất cả.
Nó được coi là phương pháp hay nhất để sử dụng các lớp của framework khi nào có thể. Mỗi khung trong số này đều được chế tạo cẩn thận để dễ sử dụng, khả năng mở rộng và tùy chỉnh. Thay vì tạo nút của bạn với các lớp của riêng nó, chỉ cần tạo một nút bằng Bootstrap, Bulma hoặc Foundation.
<!-- Bootstrap --> <button class="btn btn-primary btn-lg">I'm a large Bootstrap button</button> <!-- Bulma --> <button class="button is-primary is-large">I'm a large Bulma button</button> Bạn có thể cấu hình từng cái này để btn-primary (Bootstrap) hoặc is-primary (Bulma) tham chiếu đến màu thương hiệu của bạn thay vì màu xanh lam / xanh lá cây mặc định tương ứng với Bootstrap và Bulma.
Nếu bạn cần tạo chủ đề của riêng mình với thương hiệu của bạn , bạn có thể tạo biểu định kiểu global overrides các kiểu chung của khuôn khổ; bạn không muốn sửa đổi khung trực tiếp.
Tạo chủ đề của bạn
Để tạo của bạn 'chủ đề' riêng, tạo ra một file CSS mới và đặt nó trong assets folder và nhập nó vào bạn App.vue file . Điều quan trọng là không phân chia phạm vi file App.vue của bạn.
import '@/assets/styles.css'; ... Hãy thử ánh xạ một số kiểu mặc định phù hợp với thương hiệu của bạn với một số thành phần Bootstrap:
/* Buttons --------------------------- */ .btn-primary { background: #00462e; color: #fff; } /* dark green */ .btn-secondary { background: #a1b11a; color: #fff; } /* light green */ .btn-tertiary { background: #00b2e2; color: #fff; } /* blue */ .btn-cta { background: #f7931d; color: #fff; } /* orange */ /* Forms --------------------------- */ .form-control { border-radius: 2px; border: 1px solid #ccc; } .form-control:focus, .form-control:active { outline: none; box-shadow: none; background: #ccc; border: 1px solid #000; } Lưu ý đến khả năng tái sử dụng của các thành phần
Khi làm việc với bất kỳ khung CSS nào và Vue.js, điều quan trọng là phải ghi nhớ khả năng tái sử dụng của thành phần. Ý tôi là gì? Chà, bạn không muốn trộn CSS bố cục với chính thành phần. Bạn cần sử dụng lại thành phần vào một thời điểm nào đó và đối với trường hợp khác, có thể cần một bố cục khác.
Một ví dụ tồi
<template> <div class="row"> <div class="col"> <nav> <ul> <li><a href="#">Navigation Item #1</a></li> <li><a href="#">Navigation Item #2</a></li> <li><a href="#">Navigation Item #3</a></li> </ul> </nav> </div> </div> </template/> <template> <div> ... <Navigation/> </div> </template/> Điều hướng này được dùng trong cả đầu trang và chân trang. Cả hai đều trông rất khác nhau nhưng chứa cùng một thông tin. Hãy tách bố cục HTML ra và chuyển nó vào thành phần cha / cơ sở của nó.
Một ví dụ tốt hơn
<template> <nav> <ul> <li><a href="#">Navigation Item #1</a></li> <li><a href="#">Navigation Item #2</a></li> <li><a href="#">Navigation Item #3</a></li> </ul> </nav> </template/> <template> ... <div class="row"> <div class="col"> <Navigation/> </div> </div> </template/> Kết luận
CSS Framework giúp cuộc sống của bạn với quyền là một nhà phát triển dễ dàng hơn nhiều. Chúng làm cho mã mẫu của ứng dụng của bạn được hiểu rộng rãi, nhất quán, dễ bảo trì và dễ viết hơn. Bạn có thể tập trung nhiều hơn vào chức năng và thiết kế tổng thể của ứng dụng thay vì tập trung vào các việc thông thường, như tạo một nút từ đầu.
Bootstrap, Bulma và Foundation chỉ là ba framework được sử dụng rộng rãi ngay bây giờ. Tuy nhiên, bạn không chỉ giới hạn ở những thứ đó. Có rất nhiều khung công tác khác sẵn sàng cho bạn khám phá bao gồm Giao diện user ngữ nghĩa và Bộ giao diện user .
Các tin liên quan
Cách thiết lập dự án trang web CSS và HTML của bạn2020-10-12
Cách thêm lịch sử và kỹ năng giáo dục của bạn vào trang web của bạn bằng CSS (Phần 5)
2020-10-12
Cách tạo ID bằng CSS
2020-10-12
Giới thiệu ngắn gọn về CSS
2020-10-12
Cách tạo lớp học bằng CSS
2020-10-12
Cách hiểu và tạo quy tắc CSS
2020-10-12
So sánh CSS Pseudo-Classes: nth-child vs nth-of-type
2020-10-12
Cách tạo lớp giả bằng CSS
2020-10-12
Cách áp dụng các kiểu CSS cho HTML với Cascade và Specificity
2020-09-28
Cách tạo chủ đề chế độ tối bằng các biến CSS
2020-09-23
