Sau bao ngày mày mò, xem đủ kiểu hướng dẫn trên mạng. Với kiến thức thu được trong hơn mười năm viết mã WordPress, tôi đã triển khai thành công việc tích hợp Vue 3 vào WordPress thông qua công cụ Vite. Hôm nay vinasupport.com xin chia sẻ với các bạn cách thực hiện. Nếu có bất kỳ vấn đề nào trong quá trình tích hợp, vui lòng bình luận bên dưới. Chúng tôi sẵn sàng hỗ trợ bạn.
Để có thể thực hiện thành công, mời bạn tham khảo các bài viết sau của chúng tôi.
Hướng dẫn sử dụng Vue 3 với WordPress bằng Vite
Đầu tiên bạn vào thư mục plugin hoặc thư mục theme mà bạn cần tích hợp.
Bước 1: Tạo thư mục chứa mã nguồn cho Vue 3
npm create [email protected] vite-build -- --template vue npm install
Nó sẽ tạo cấu trúc thư mục bên dưới.
Bước 2: Chỉnh sửa tập tin vite-build/vite.config.js với nội dung như sau:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
import liveReload from 'vite-plugin-live-reload';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
liveReload(`${__dirname}/../**/*.php`),
],
build: {
rollupOptions: {
output: {
dir: path.join(__dirname, '../build'),
entryFileNames: 'app.js',
assetFileNames: (assetInfo) => {
let extType = assetInfo.name.split('.')[1];
if (extType === 'css') {
return `app.css`;
} else {
return `assets/[name]-[hash][extname]`
}
},
chunkFileNames: "app.js",
// manualChunks: undefined,
}
}
},
define: {
__VUE_PROD_DEVTOOLS__: true // no effect
}
})
Đoạn mã nguồn ở trên sẽ làm như sau:
- thư mục: : Đã sửa lỗi đường dẫn thư mục chứa File sau khi xây dựng. Ví dụ: thư mục ../build bên ngoài dự án
- mục nhậpFileNames: ứng dụng đường dẫn File cố định-[hash].js sang app.js
- tài sảnFileNames: ứng dụng đường dẫn File cố định-[hash].css sang app.css
- __VUE_PROD_DEVTOOLS__: Hỗ trợ Vue DevTools với lệnh vite build
Ngoài ra chúng tôi còn sử dụng plugin vite-plugin-live-tải lại để tải lại File xây dựng khi chỉnh sửa File php
Bước 3: Chỉnh sửa tập tin vite-build/package.json với nội dung như sau:
"scripts": {
"dev": "vite",
"build": "vite build",
"watch": "vite build --watch --mode development --emptyOutDir",
"preview": "vite preview"
},
Vì vậy, chúng tôi có thêm một lệnh: đồng hồ chạy npm để có thể sống các tập tin xây dựng.
Bước 4: Như vậy đến bước này đã hoàn tất việc thiết lập với vite và vue 3, bạn có thể bắt tay vào viết các thành phần tương ứng. sau đó chạy lệnh sau để tạo File.
npm run watch
Ta sẽ có các file build bên dưới.
Bước 5: Bây giờ là lúc tích hợp chúng vào WordPress.
Ví dụ: Mình tích hợp vào phần quản trị của WordPress.
Trong File php trong thư mục plugin hoặc File hàm.php của chủ đề bạn thêm mã này:
add_action('admin_enqueue_scripts', function() {
# Enqueue Style
wp_enqueue_style( 'vinasupport_com_app_style', COUPON_MANAGER_URL . 'build/app.css', false, '1.0.0' );
# Enqueue Script
wp_enqueue_script('vinasupport_com_app_script', COUPON_MANAGER_URL . 'build/app.js');
});
add_filter('script_loader_tag', function($tag, $handle, $src) {
// if not your script, do nothing and return original $tag
if ( 'vinasupport_com_app_script' !== $handle ) {
return $tag;
}
// change the script tag by adding type="module" and return it.
return '<script type="module" src="' . esc_url( $src ) . '"></script>';
} , 10, 3);
Với 2 móc
- admin_enqueue_scripts: để đặt tập lệnh, css được nhúng trong mẫu
- script_loader_tag: trong trường hợp script app.js thì bạn cần đổi thuộc tính type thành type=”module”, cái này là bắt buộc để hiển thị vue 3 trên wordpress.
Bước 6: Bây giờ đặt thẻ
bất cứ nơi nào bạn muốn hiển thị.
Bạn sẽ có kết quả như bên dưới là thành công.
Phần kết luận
Trên đây là các bước cơ bản để tích hợp Vue vào một project sử dụng WordPress. Vẫn còn rất nhiều việc phải làm để có thể sử dụng tốt Vue 3 trên WordPress. Chúng tôi sẽ cập nhật thêm kiến thức trên vinasupport.com.
Ngoài ra bạn có thể tham khảo thêm một plugin tích hợp vue 3 cơ bản tại đây:
Nguồn: vinasupport.com