Question

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

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

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

非常感谢！

Answer 1

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

1）将vuejs安装在webroot的子目录中（例如webroot / vuedev）

2）配置vue路由器以使用历史记录模式：

venv/local/lib/python2.7/site-packages/pyhive/hive.py", line 487, in _check_status
raise OperationalError(response)

3）在webroot / vuedev / config / index.js中将构建区域的assetPublicPath更改为export default new Router({ mode:'history', routes: [

4）因为在开发人员模式下，您的应用程序运行在 localhost：8080 上，而您的ajax调用 your-domain.dev ，您将遇到CORS问题。将标头添加到您的Ajax调用中：

assetsPublicPath: '',

为您的Ajax调用使用前缀“ api”：your-domain.xxx/api/controller/action ...

5）将cakePHP的路由更改为使用REST api：在config / routes.php中：

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

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

6）将webroot / vuedev的index.html内容复制到模板主目录（src / Template / Pages / home.ctp），然后添加到控制器的显示操作中。

// 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);
});

7）用于生产：启动构建过程：

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

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

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

如果有人手动调用特定页面或刷新浏览器（例如：your-domain.xxx/Products），则页面控制器将发送index.html内容。您可以在脚本变量中的全局var中将te param：page添加到您的template / Pages / home.ctp中，以供路由器使用：

npm run build.

在您的App.vue中：

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

Answer 2

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

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

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

我们已将所有前端内容放在/ resources / js和/ scss等中并构建它并激活热重载，以便我们在点击保存后立即看到更改。这只是为了发展。在部署到我们的实时系统时，JS是基于实时系统构建的，我们不会将任何构建添加到我们的git存储库中。

然而，如果你不坚持100％纯粹的JS前端应用程序，前端JS应用程序的“构建”是一个痛苦的屁股。没有真正标准的方法。即使是“导入”也有它的怪癖，感觉更像是一个黑客，而不是解决问题的好方法，也没有解决打包文件以减少请求和文件大小的问题。

一旦你把所有的垃圾粘在一起它通常很好但是真的很难过，2018年没有推荐的标准来构建网络应用程序的JS。我真的希望今天的工作方式很快就会消失，有利于Web Assembly。

如果您不想使用Webpack，还有require.js和其他人，但对于我们来说，webpack工作得最好。

Answer 3

这是我遵循的步骤：

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

添加插件，例如vue路由器，vuex等。

vue create bos-vue
vue add vuex
vue add router

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

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

npm install-保存axios vue-axios
cakephp服务器上的所有数据将通过axios请求以json格式获取。

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

在.htaccess中添加标头，启用apache的标头模块，在application.php中禁用CSRF中间件

要进行身份验证，请请求cakephp服务器登录并将用户信息存储在本地存储中（以在前端进一步使用）。使用导航保护器检查每个axios呼叫响应中是否存在会话。
要进行部署，请运行：npm run build
将所有内容（除index.html之外）从dist目录复制到webroot。将index.html复制到default.ctp

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

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

3 个答案: