Asked Oct 25th, 2019 2:19 AM 186 0 4
  • 186 0 4
+4

Convert HTML/CSS/JS to VueJS Component

Share
  • 186 0 4

Chào mọi người,

Mình có 1 vấn đề nhau sau. Hiện tại mình có template (Tải trên Themeforet) HTML/CSS/JS (Bao gồm các thư viện Jquery). Mình muốn convert thành Vuejs.

Vấn đề ở đây là Template có nhiều file CSS và JS (Các thư viện bên thứ 3). Mình có hướng giải quyết là import các file CSS và JS (Các thư viện bên thứ 3) vào file index gốc. Mình tham khảo bài viết sau: https://medium.com/@disjfa/using-vue-js-in-existing-websites-the-easy-way-d46cd1f0c945

Mình thấy cách này không được tối ưu cho lắm nhưng chưa nghĩ ra cách nào khác OK hơn 😅😅

Mong các cao nhân chỉ giáo có cách nào tối ưu hơn không ạ?

Cảm ơn mọi người đã đọc.

4 ANSWERS


Answered Oct 25th, 2019 3:40 AM
+2

Nếu bạn viết Vuejs trong project laravel bạn có thể mở file theo đường dẫn resources/js/bootstrap.js

Ở đây bạn có thể thấy Laravel đã require sẵn jquery và một số thư viện js khác. Việc của bạn sẽ là tìm các thư viện publish trên npm packages và require vào đây

Ví dụ trong trường hợp project của mình mình đã require thư viện admin-lte

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('admin-lte');
    require('jquery-contextmenu');
} catch (e) {}

Tham khảo thêm tại : https://viblo.asia/p/frontend-install-admin-lte-as-a-node-dependency-gDVK2R9eKLj

Share
lehoangnnx @lehoangnnx
Oct 25th, 2019 5:33 AM

Cảm ơn bạn. Cái này sẽ giúp ích cho mình trong tương lai.

Hiện tại mình build dự án VueJS riêng cụ thể mình dùng NuxtJS.

0
| Reply
Share
Answered Oct 25th, 2019 2:39 AM
Share
lehoangnnx @lehoangnnx
Oct 25th, 2019 2:51 AM

Cảm ơn bạn. Theo mình hiểu cách này cũng là mix các file lại với nhau đúng không bạn?

Các thư viện JQuery bên thứ 3 thì chắc mình chỉ có cách là import nó vào luôn nhỉ?

Đâu còn cách nào khác đâu.

0
| Reply
Share
Answered Oct 27th, 2019 4:33 PM
+1

Mình nghĩ nếu bạn đã có ý định chuyển sang vuejs thì cố gắng loại bỏ jquery luôn Vuejs làm rất tốt rồi, thêm jquery chỉ bị thừa thải

Còn cách chuyển thì bạn chỉ có nước phân tích trang web thành các component rồi xử lý từng cái thôi.

Share
lehoangnnx @lehoangnnx
Oct 29th, 2019 2:07 AM

Cảm ơn bạn. Nhưng vì mình muốn nhanh nên dùng template, mà template thì họ viết họ dùng nhiều thư viện JS/JQuery bên thứ 3, bỏ ra thì lỗi thế mới khổ 😂

Mình biết đã dùng VueJS mà còn JQuery thì thật sự không cần, nhưng mình nghĩ nếu dùng của người ta thì không còn cách nào khác nhỉ?

0
| Reply
Share
Answered Nov 1st, 2019 7:25 AM
0

Thư viện bên thứ 3 thì cũng chỉ có cách import thẳng vào thôi.

Share