B\u00e2y gi\u1edd h\u00e3y c\u00e0i \u0111\u1eb7t plugin AssetMix b\u1eb1ng l\u1ec7nh:<\/span><\/h4>\ncomposer require ishanvyas22\/asset-mix<\/pre>\nT\u1ea1i sao plugin n\u00e0y? Ch\u00e0, plugin n\u00e0y gi\u00fap ch\u00fang ta t\u00edch h\u1ee3p Laravel Mix v\u1edbi CakePHP framework m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng. Plugin n\u00e0y s\u1ebd g\u00e1nh t\u1ea5t c\u1ea3 c\u00f4ng vi\u1ec7c kh\u00f3 kh\u0103n cho ch\u00fang t\u00f4i \u0111\u1ec3 ch\u00fang t\u00f4i c\u00f3 th\u1ec3 t\u1eadp trung v\u00e0o vi\u1ec7c x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng v\u1edbi Vue.js v\u00e0 CakePHP.<\/span><\/p>\nC\u1ea5u h\u00ecnh<\/h2>\n
1. Load plugin b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng l\u1ec7nh sau:<\/span><\/p>\nbin\/cake plugin load AssetMix<\/pre>\n2. T\u1ea1o th\u01b0 m\u1ee5c tri\u1ec3n khai Vue.js b\u1eb1ng l\u1ec7nh sau:<\/span><\/p>\nbin\/cake asset_mix generate --dir=resources<\/pre>\n3. C\u00e0i \u0111\u1eb7t c\u00e1c g\u00f3i c\u1ea7n thi\u1ebft cho font-end:<\/span><\/p>\nnpm install<\/pre>\n4. Tri\u1ec3n khai font-end \u0111\u1ec3 c\u00f3 th\u1ec3 ch\u1ea1y tr\u00ean tr\u00ecnh duy\u1ec7t:<\/span><\/p>\nnpm run dev<\/pre>\n5. Sau khi ch\u1ea1y l\u1ec7nh npm run dev<\/i><\/b>, 1 file <\/span>app.js <\/b>\u0111\u01b0\u1ee3c build ra. Ti\u1ebfp theo, ch\u00fang ta s\u1ebd nh\u00fang file n\u00e0y v\u00e0o layout:<\/span><\/p>\n<?= $this->AssetMix->script('app') ?><\/pre>\n6. Th\u00eam d\u00f2ng b\u00ean d\u01b0\u1edbi v\u00e0o file src\/View\/AppView.php:<\/span><\/p>\n$this->loadHelper('AssetMix.AssetMix');<\/pre>\nT\u1ea5t c\u1ea3 \u0111\u00e3 xong, ch\u00fang ta \u0111\u00e3 s\u1eb5n s\u00e0ng s\u1eed d\u1ee5ng Vue.js v\u1edbi CakePHP<\/p>\n
Ki\u1ec3m th\u1eed<\/h2>\n
B\u00e2y gi\u1edd ch\u00fang ta s\u1ebd t\u1ea1o 1 view file <\/span>templates\/Pages\/greet.php <\/span>v\u00e0 nh\u00fang Vue component v\u00e0o:<\/span><\/p>\n<div id=\"app\">\r\n <h1>Greetings<\/h1>\r\n <!-- Load AppGreet component -->\r\n <app-greet><\/app-greet>\r\n<\/div>\r\n<\/pre>\nTi\u1ebfp theo ch\u1ea1y l\u1ec7nh bin\/cake server \u0111\u1ec3 start nhanh 1 server v\u00e0 v\u00e0o tr\u00ecnh duy\u1ec7t v\u1edbi url: localhost:8765\/pages\/greet<\/span><\/p>\nK\u1ebft qu\u1ea3 ch\u00fang ta s\u1ebd th\u1ea5y hi\u1ec3n th\u1ecb\u00a0 d\u00f2ng ch\u1eef Hello world<\/span><\/p>\nTi\u1ebfp theo, ch\u00fang ta s\u1ebd th\u1eed thay \u0111\u1ed5i ch\u1eef Hello world b\u1eb1ng c\u00e1ch thay \u0111\u1ed5i n\u1ed9i dung c\u1ee7a file: resources\/js\/components\/AppGreet.vue<\/span><\/p>\n<template>\r\n <div>\r\n Welcome to Market Enterprise\r\n <\/div>\r\n<\/template><\/pre>\nSau khi thay \u0111\u1ed5i n\u1ed9i dung, ch\u00fang ta s\u1ebd ch\u1ea1y l\u1ea1i l\u1ec7nh npm run dev \u0111\u1ec3 build l\u1ea1i. Ch\u1ea1y l\u1ea1i url localhost:8765\/pages\/greet, k\u1ebft qu\u1ea3 ch\u00fang ta s\u1ebd nh\u1eadn \u0111\u01b0\u1ee3c ch\u1eef Welcome to Market Enterprise.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"Trong b\u00e0i n\u00e0y, t\u00f4i xin chia s\u1ebb m\u1ed9t c\u00e1ch t\u00edch h\u1ee3p VueJS v\u00e0o CakePHP kh\u00e1 th\u00fa v\u1ecb.<\/p>\n","protected":false},"author":51,"featured_media":3409,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3395","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/3395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/comments?post=3395"}],"version-history":[{"count":0,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/3395\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media\/3409"}],"wp:attachment":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media?parent=3395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/categories?post=3395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/tags?post=3395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"VueJS](\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/06\/20183641\/Screenshot-2023-06-20-at-18.36.17-300x122.png\" "\\"VueJS")