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

Question

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

我希望有一种方法可以从 VueCLI（webpack 等）附带的所有工具中获益，同时无需在 CakePHP 应用程序中复制生成的文件即可继续工作。

那么在同一项目中使用 CakePHP 3 作为后端和 Vue.js 作为前端开发应用程序的最简化过程是什么。

非常感谢！

Answer 1

除非您不关心文件大小和加载时间，否则您不复制文件就无法逃脱。只需将所有内容放入您的 webroot/js 然后在您的视图中加载所有需要的文件就可以了。 Vue 是 JS，只是 JS，仅此而已。我也不明白为什么自动发生的应对方式不好。

IMO JS 应用程序是通过构建脚本以某种方式粘在一起的巨大混乱。

如果您关心优化构建，请使用 npm 和 webpack 并配置 Webpack 以构建您的 Vue 应用程序并将您的 webroot 定义为目标文件夹。 Webpack 将允许您 auto-split files 并在文件变大时向您发出警告。

我们已将所有前端内容放入 /resources/js 和 /scss 等位置并构建它并启用热重载，因此我们可以在点击保存后立即看到更改。这只是为了发展。当部署到我们的实时系统时，JS 是在实时系统上构建的，我们不会将任何构建添加到我们的 git 存储库。

但是，如果您不坚持使用 100% 纯 JS 前端应用程序，前端的 "building" JS 应用程序将是一件令人头疼的事情。没有真正的标准方法来做到这一点。即使 "import" 也有它的怪癖，感觉更像是 hack 而不是解决问题的好方法，也没有解决打包文件以减少请求和文件大小的问题。

一旦你把所有的废话粘在一起，它通常会很好地工作，但真的很遗憾，在 2018 年没有为 Web 应用程序构建 JS 的推荐标准。我真的希望今天做事的方式很快就会消失，取而代之的是 Web Assembly。

如果你不想使用 Webpack，还有 require.js 和其他的，但对我们来说 webpack 效果最好。

Answer 2

好的，这是一个快速设置：

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

2) 配置你的 vue 路由器使用历史模式：

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

3) 在webroot/vuedev/config/index.js

中将build zone的assetsPublicPath改为assetsPublicPath: '',

4) 因为在开发模式下，您的应用程序在 localhost:8080 上运行并且您的 ajax 调用 [=69= .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 将被转移到控制器页面，操作显示。

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 内容。您可以将 te param :page 添加到您的 template/Pages/home.ctp 中的全局 var in 脚本标记中以供路由器使用：

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

在你的 App.vue 中：

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

Answer 3

以下是我遵循的步骤：

在主应用程序目录中使用 vuejs 创建一个项目。

添加vue router、vuex等插件

vue create bos-vue
vue add vuex
vue add router

您可以使用以下命令运行应用程序：

npm run serve
安装项目所需的节点模块：

npm install --save axios vue-axios
cakephp服务器的所有数据都会通过axios请求获取json格式

axios.get(http://localhost/cakeapp/articles/getdata)
以上调用会导致 CORS 问题。解决开发中的CORS问题：

在.htaccess中添加headers，启用apache的headers模块，在application.php

中禁用CSRF中间件

身份验证，请求cakephp服务器登录，并将用户信息存储在本地存储中（以供前端使用）。使用导航守卫检查每个axios调用响应中是否存在session。
对于部署，运行：npm run build
将 dist 目录中的所有内容（index.html 除外）复制到 webroot。在default.ctp

现在 cakephp 中的一切都会运行照常。

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

Best practice to integrate VueJS with CakePHP 3

integration

cakephp

cakephp-3.0

vue.js

vuejs2