Yêu cầu thg 10 25, 2019 2:19 SA 2183 0 5
  • 2183 0 5
+4

Convert HTML/CSS/JS to VueJS Component

Chia sẻ
  • 2183 0 5

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.

5 CÂU TRẢ LỜI


Đã trả lời thg 10 25, 2019 3:40 SA
+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

Chia sẻ
Avatar lehoangnnx @lehoangnnx
thg 10 25, 2019 5:33 SA

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.

Đã trả lời thg 10 25, 2019 2:39 SA
Chia sẻ
Avatar lehoangnnx @lehoangnnx
thg 10 25, 2019 2:51 SA

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.

Đã trả lời thg 10 27, 2019 4:33 CH
+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.

Chia sẻ
Avatar lehoangnnx @lehoangnnx
thg 10 29, 2019 2:07 SA

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ỉ?

Đã trả lời thg 11 1, 2019 7:25 SA
0

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

Chia sẻ
Đã trả lời thg 6 2, 2022 2:58 SA
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.
Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí