将VueJS与CakePHP 3集成的最佳实践

Question

我想知道在CakePHP 3应用程序中集成Vue.js框架的最佳方法是什么？

我希望有一种方法可以从VueCLI(webpack,等等)附带的所有工具中受益,同时仍然无需在CakePHP应用程序中复制生成的文件.

那么使用CakePHP 3作为后端并将Vue.js作为同一项目中的前端来开发应用程序的最简化流程是什么呢？

非常感谢!

Answer 1

好的,这是一个快速设置:

1)在webroot的子目录中安装vuejs(如webroot/vuedev)

2)配置您的vue路由器以使用历史模式:

export default new Router({
  mode:'history',
  routes: [

3)构建区的assetsPublicPath更改为assetsPublicPath: '',在根目录/ vuedev /配置/ index.js

4)因为在开发模式下你的应用程序在localhost:8080上运行而你的ajax调用your-domain.dev你会遇到CORS问题.为您的ajax调用添加标头:

axios.get(url,{headers: {"Access-Control-Allow-Origin": "*"}}).then...

为你的ajax调用使用前缀"api":your-domain.xxx/api/controller/action ...

5)更改cakePHP的路由以使用REST api:在config/routes.php中:

// add api prefix

Router::prefix('api', function ($routes) {
    $routes->fallbacks(DashedRoute::class);
});

// change default route :

Router::scope('/', function (RouteBuilder $routes) {

    $routes->connect('/:page',['controller'=>'Pages','action'=>'display']); 

    $routes->connect('/', ['controller' => 'Pages', 'action' => 'display', 'home']);
    $routes->connect('/pages/*', ['controller' => 'Pages', 'action' => 'display']);
    $routes->fallbacks(DashedRoute::class);
});

Ajax调用your-domain.xxx/api/controller/action将正常进行.每次调用your-domain.com/xxx都会转移到控制器页面,操作显示.

6)将webroot/vuedev的index.html内容复制到模板主目录(src/Template/Pages/home.ctp)并添加到控制器的显示操作中.

$this->viewBuilder()->setLayout(false); 

7)用于生产:启动构建过程:

npm run build. 

将webroot/vuedev/dist/static复制到webroot/static

将webroot/vuedev/dist/index.html的内容复制到src/Template/Pages/home.ctp

如果有人调用特定页面或刷新浏览器(即:your-domain.xxx/Products),您的页面控制器将发送index.html内容.您可以在路由器使用的全局var in script标记中将te param:page添加到模板/ Pages/home.ctp:

<script>var routeToJump=<?php echo $yourvar;?>; </script>

在你的App.vue中:

export default {
  name: 'App',
  created() {
    this.$router.push(routeToJump);
    ...