+4
Convert HTML/CSS/JS to VueJS Component
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.
Thêm một bình luận
5 CÂU TRẢ LỜI
+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
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.
+1
Bạn thử sử dụng laravel-mix thử xem:
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.
+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.
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
Bạn có thể chọn một trong các giải pháp sau:
- Tìm theme cho NuxtJS - hiện tại theme của nuxt thì tương đối ít.
- Đưa hết CSS/JS vào cấu hình nuxt.config - cách này tiện nhưng không tối ưu
- Chuyển các JS/CSS về package.json, tìm các thư viện Vue thay thế. - cách này thì tốn công một chút.
