Chúng tôi đang xây dựng một dự án Vite với Bootstrap từ đầu, vì vậy có một số điều kiện tiên quyết và các bước trước khi chúng tôi thực sự có thể bắt đầu. Hướng dẫn này yêu cầu bạn phải có Node. js đã được cài đặt và một số thông tin quen thuộc với thiết bị đầu cuối
Tạo một thư mục dự án và thiết lập npm. Chúng tôi sẽ tạo thư mục
1 và khởi tạo npm với đối sốnpm i --save bootstrap @popperjs/core
2 để tránh nó hỏi chúng tôi tất cả các câu hỏi tương tácnpm i --save bootstrap @popperjs/core
mkdir my-project && cd my-project npm init -y
Cài đặt Vite. Không giống như hướng dẫn về Webpack của chúng tôi, ở đây chỉ có một công cụ xây dựng phụ thuộc duy nhất. Chúng tôi sử dụng
3 để báo hiệu rằng sự phụ thuộc này chỉ dành cho mục đích sử dụng phát triển và không dành cho sản xuấtnpm i --save bootstrap @popperjs/core
Cài đặt Bootstrap. Bây giờ chúng ta có thể cài đặt Bootstrap. Chúng tôi cũng sẽ cài đặt Popper vì trình đơn thả xuống, cửa sổ bật lên và chú giải công cụ của chúng tôi phụ thuộc vào nó để định vị chúng. Nếu bạn không có kế hoạch sử dụng các thành phần đó, bạn có thể bỏ qua Popper tại đây
npm i --save bootstrap @popperjs/core
Cài đặt phụ thuộc bổ sung. Ngoài Vite và Bootstrap, chúng tôi cần một phần phụ thuộc khác [Sass] để nhập và gói CSS của Bootstrap đúng cách
Bây giờ chúng ta đã cài đặt và thiết lập tất cả các phụ thuộc cần thiết, chúng ta có thể bắt đầu tạo các tệp dự án và nhập Bootstrap
Cấu trúc dự án
Chúng ta đã tạo thư mục
npm i --save bootstrap @popperjs/core
1 và khởi tạo npm. Bây giờ, chúng ta cũng sẽ tạo thư mục npm i --save bootstrap @popperjs/core
5, biểu định kiểu và tệp JavaScript để hoàn thiện cấu trúc dự án. Chạy phần sau từ npm i --save bootstrap @popperjs/core
1 hoặc tạo cấu trúc thư mục và tệp theo cách thủ công được hiển thị bên dưới________số 8_______
Khi bạn hoàn thành, dự án hoàn chỉnh của bạn sẽ trông như thế này
my-project/
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ | └── styles.scss
| └── index.html
├── package-lock.json
├── package.json
└── vite.config.js
Tại thời điểm này, mọi thứ đã ở đúng vị trí, nhưng Vite sẽ không hoạt động vì chúng tôi chưa điền vào
npm i --save bootstrap @popperjs/core
7 của mìnhĐịnh cấu hình Vite
Với các phụ thuộc được cài đặt và thư mục dự án của chúng tôi đã sẵn sàng để chúng tôi bắt đầu mã hóa, giờ đây chúng tôi có thể định cấu hình Vite và chạy dự án của mình cục bộ
Mở
7 trong trình chỉnh sửa của bạn. Vì nó trống, chúng tôi sẽ cần thêm một số cấu hình soạn sẵn vào nó để chúng tôi có thể khởi động máy chủ của mình. Phần cấu hình này cho Vite biết nơi tìm kiếm JavaScript của dự án của chúng tôi và cách hoạt động của máy chủ phát triển [lấy từ thư mụcnpm i --save bootstrap @popperjs/core
5 với tải lại nóng]npm i --save bootstrap @popperjs/core
const path = require['path'] export default { root: path.resolve[__dirname, 'src'], server: { port: 8080, hot: true } }
Tiếp theo chúng ta điền vào
0. Đây là trang HTML mà Vite sẽ tải trong trình duyệt để sử dụng CSS và JS đi kèm mà chúng tôi sẽ thêm vào trong các bước saumkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
Bootstrap w/ Vite
Hello, Bootstrap and Vite! Primary button
Chúng tôi đang bao gồm một chút kiểu dáng Bootstrap ở đây với
1 và để chúng tôi biết khi Vite tải CSS của Bootstrapmkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
Bây giờ chúng ta cần một tập lệnh npm để chạy Vite. Mở
2 và thêm tập lệnhmkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
3 được hiển thị bên dưới [bạn đã có tập lệnh thử nghiệm]. Chúng tôi sẽ sử dụng tập lệnh này để khởi động máy chủ nhà phát triển Vite cục bộ của chúng tôimkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
{ // ... "scripts": { "start": "vite", "test": "echo \"Error: no test specified\" && exit 1" }, // ... }
Và cuối cùng, chúng ta có thể bắt đầu Vite. Từ thư mục
1 trong thiết bị đầu cuối của bạn, hãy chạy tập lệnh npm mới được thêm vào đónpm i --save bootstrap @popperjs/core
Trong phần tiếp theo và phần cuối cùng của hướng dẫn này, chúng tôi sẽ nhập tất cả CSS và JavaScript của Bootstrap
Nhập Bootstrap
Thiết lập nhập Sass của Bootstrap trong
7. Tệp cấu hình của bạn hiện đã hoàn tất và phải khớp với đoạn trích bên dưới. Phần mới duy nhất ở đây là phầnnpm i --save bootstrap @popperjs/core
6—chúng tôi sử dụng phần này để thêm bí danh vào các tệp nguồn của chúng tôi bên trongmkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
7 để giữ cho quá trình nhập đơn giản nhất có thểmkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
const path = require['path'] export default { root: path.resolve[__dirname, 'src'], resolve: { alias: { '~bootstrap': path.resolve[__dirname, 'node_modules/bootstrap'], } }, server: { port: 8080, hot: true } }
Bây giờ, hãy nhập CSS của Bootstrap. Thêm phần sau vào
8 để nhập tất cả Sass nguồn của Bootstrapmkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";
Bạn cũng có thể nhập riêng các biểu định kiểu của chúng tôi nếu muốn. để biết chi tiết
Tiếp theo, chúng tôi tải CSS và nhập JavaScript của Bootstrap. Thêm phần sau vào
9 để tải CSS và nhập tất cả JS của Bootstrap. Popper sẽ được nhập tự động thông qua Bootstrapmkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
// Import our custom CSS import '../scss/styles.scss' // Import all of Bootstrap's JS import * as bootstrap from 'bootstrap'
Bạn cũng có thể nhập các plugin JavaScript riêng lẻ nếu cần để giảm kích thước gói
0npm i --save bootstrap @popperjs/core
Đọc tài liệu JavaScript của chúng tôi để biết thêm thông tin về cách sử dụng plugin của Bootstrap
Và bạn đã hoàn thành. 🎉 Với mã nguồn Sass và JS của Bootstrap đã được tải đầy đủ, máy chủ phát triển cục bộ của bạn sẽ trông như thế này
Bây giờ bạn có thể bắt đầu thêm bất kỳ thành phần Bootstrap nào bạn muốn sử dụng. Hãy chắc chắn kiểm tra dự án mẫu Vite hoàn chỉnh để biết cách thêm Sass tùy chỉnh bổ sung và tối ưu hóa bản dựng của bạn bằng cách chỉ nhập các phần CSS và JS của Bootstrap mà bạn cần
Xem một cái gì đó sai hoặc lỗi thời ở đây? . Cần trợ giúp khắc phục sự cố?