cakephp - 将 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)在webroot/vuedev/config/index.js中将构建区的assetsPublicPath修改为assetsPublicPath: '',

4) 因为在开发模式下，您的应用在 localhost:8080 上运行并且您的 ajax 调用 your-domain.dev 您将遇到 CORS 问题。将 header 添加到您的 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 的每次调用都将被转移到 Controller 页面、操作显示。

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

$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)，您的页面 Controller 将发送 index.html 内容。 您可以将 te param :page 添加到您的 template/Pages/home.ctp 中的全局 var in script 标记中以供路由器使用:

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

在你的 App.vue 中:

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