{"id":834,"date":"2025-06-12T00:47:24","date_gmt":"2025-06-11T16:47:24","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/php\/php-application-manual\/laravel\/834.html"},"modified":"2025-06-12T00:47:24","modified_gmt":"2025-06-11T16:47:24","slug":"%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8-vue-js-%e4%b8%8e-laravel","status":"publish","type":"my1js","link":"https:\/\/www.zhaozhao123.cn\/php\/my1js\/834.html","title":{"rendered":"\u5982\u4f55\u4f7f\u7528 Vue.js \u4e0e Laravel"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n

Vue.js 是一个流行的前端框架，而 Laravel 是一个 PHP 框架。它们可以很好地结合使用，以构建强大的 web 应用程序。以下是如何将 Vue.js 与 Laravel 结合使用的步骤：<\/p>\n

1. 安装 Laravel<\/h3>\n

首先，你需要安装 Laravel。你可以通过 Composer 来完成这个过程。<\/p>\n

composer create-project --prefer-dist laravel\/laravel my-vue-app\ncd my-vue-app<\/code><\/pre>\n
2. 安装 Vue CLI<\/h3>\n
Laravel 提供了一个 Vue CLI 工具来快速创建 Vue 组件和项目结构。<\/p>\n
npm install -g @vue\/cli<\/code><\/pre>\n
3. 创建 Vue 组件<\/h3>\n
现在，你可以使用 Vue CLI 创建一个新的 Vue 组件。<\/p>\n
vue create src\/components\/HelloWorld.vue<\/code><\/pre>\n
这会生成一个 src\/components\/HelloWorld.vue<\/code> 文件，并且你会看到一些默认的模板和脚本文件。<\/p>\n
4. 在 Laravel 中引入 Vue<\/h3>\n
在 Laravel 中，你可以通过 CDN 引入 Vue 或者使用 npm 包管理器来安装 Vue。<\/p>\n
使用 CDN 引入 Vue<\/h4>\n
在你的 HTML 文件中引入 Vue 的 CDN。<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Laravel with Vue<\/title>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@2\"><\/script>\n<\/head>\n<body>\n    <div id=\"app\">\n        <h1>{{ message }}<\/h1>\n    <\/div>\n\n    <script src=\"{{ asset('js\/app.js') }}\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
使用 npm 包管理器安装 Vue<\/h4>\n
如果你选择使用 npm 包管理器，可以在 package.json<\/code> 中添加 Vue 依赖项。<\/p>\n
{\n    \"dependencies\": {\n        \"vue\": \"^2\"\n    }\n}<\/code><\/pre>\n
然后运行 npm install<\/code> 命令来安装依赖项。<\/p>\n
5. 在 Laravel 中使用 Vue 组件<\/h3>\n
在 Laravel 中，你可以将 Vue 组件注册为服务提供者，以便在应用中全局访问它。<\/p>\n
注册 Vue 组件<\/h4>\n
在 AppServiceProvider.php<\/code> 中注册 Vue 组件。<\/p>\n
use IlluminateSupportFacadesApp;\n\nclass AppServiceProvider extends ServiceProvider\n{\n    public function boot()\n    {\n        $this->loadViewsFrom(__DIR__ . '\/..\/resources\/views', 'my-vue-app');\n\n        App::singleton('hello-world-component', function () {\n            return new MyVueAppComponentsHelloWorld();\n        });\n    }\n\n    public function register()\n    {\n        \/\/\n    }\n}<\/code><\/pre>\n
在视图中使用组件<\/h4>\n
在你的视图文件中使用注册的 Vue 组件。<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Laravel with Vue<\/title>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@2\"><\/script>\n<\/head>\n<body>\n    <div id=\"app\">\n        <h1>{{ message }}<\/h1>\n        <hello-world-component><\/hello-world-component>\n    <\/div>\n\n    <script src=\"{{ asset('js\/app.js') }}\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
6. 运行应用<\/h3>\n
最后，运行你的 Laravel 应用。<\/p>\n
php artisan serve<\/code><\/pre>\n
现在，你应该能够看到一个带有 Vue 组件的 Laravel 应用程序。你可以根据需要进一步扩展和定制这两个框架。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
\r\n
\r\n
\r\n
\r\n
\r\n
\"黑板Bug讲师\"<\/figure>\r\n\r\n\r\n\r\n
黑板Bug讲师<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
概览<\/h2>
Vue.js 和 Laravel 分别是用于前端和后端开发的两个强大框架。使用它们结合在一起可以实现构建动态单页应用和用户界面时无缝的开发过程。本教程将指导您如何将 Vue.js 引入到 Laravel 项目中。<\/p>
前置条件<\/h3>
在开始之前，请确保已安装以下软件：<\/p>
Laravel 安装器<\/p>
Node.js 和 npm<\/p>
PHP 7.3 或者 PHP 8.0，以及 Composer。<\/p>
步骤式说明<\/h2>
步骤1：创建一个新的Laravel项目<\/h3>
首先创建一个新的Laravel项目。运行以下命令：<\/p>
laravel new my-vue-app<\/code><\/pre>
然后，导航到你的项目目录：<\/p>
cd my-vue-app<\/code><\/pre>
步骤2：安装Vue<\/h3>
在你的Laravel应用中，通过npm安装Vue：<\/p>
npm install vue<\/code><\/pre>
步骤 3：在 Laravel 中设置 Vue<\/h3>
Laravel Mix 提供了一种简洁、流畅的API来定义您的应用程序的 Webpack 构建步骤。要集成 Vue，请查找并更新 webpack.mix.js 文件：<\/p>
mix.js('resources\/js\/app.js', 'public\/js').vue()<\/code><\/pre>
步骤 4：创建 Vue 组件<\/h3>
好的，已经完成了这个任务。现在，请随时告诉我您需要我进行下一步操作。<\/p>
<template>\n  <div>\n    <h1>{{ message }}<\/h1>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  data() {\n    return {\n      message: 'Hello Vue! Welcome to Laravel.'\n    }\n  }\n}\n<\/script><\/code><\/pre>
步骤5：在Blade模板中包含Vue组件<\/h3>
在您的主 Blade 文件（例如：resources\/views\/welcome.blade.php），包含 Vue 组件。<\/p>
<div id=\"app\">\n  <example-component><\/example-component>\n<\/div>\n\n<script src=\"{{ mix('js\/app.js') }}\"><\/script><\/code><\/pre>
步骤6：编译资源<\/h3>
运行以下命令编译您的资产，其中包括您的Vue组件：<\/p>
npm run dev<\/code><\/pre>
第7步：安装官方的Laravel Vue.js scaffolding<\/h3>
使用Laravel，也可以利用其官方的Vue.js骨架：<\/p>
composer require laravel\/ui\nphp artisan ui vue\nphp artisan ui vue --auth<\/code><\/pre>
结论。<\/h2>
Vue.js 和 Laravel 现已在您的项目中协同工作。您创建了一个新的 Laravel 项目，安装了 Vue 并添加了组件，同时将它们与 Blade 模板集成在一起。这种组合使得您可以构建现代、响应式的用户界面，同时受益于 Laravel 强大的后端功能。<\/p><\/body>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
\r\n
\r\n
\r\n
\r\n
\r\n
\"长工码奴1523\"<\/figure>\r\n\r\n\r\n\r\n
长工码奴1523<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
Vue.js 和 Laravel 是两个非常流行的前端框架和后端框架，它们结合可以构建出强大的全栈应用。<\/p>\n
如何使用 Vue.js 与 Laravel<\/h3>\n
    \n
  1. \n
    安装 Laravel<\/p>\n
      \n
    • 使用 Composer 安装 Laravel: composer require laravel\/laravel<\/code><\/li>\n<\/ul>\n<\/li>\n
    • \n
      创建一个新的 Laravel 应用<\/p>\n
      composer create-project --prefer-dist laravel\/laravel your-project-name<\/code><\/pre>\n
      这将创建一个名为 your-project-name<\/code> 的新项目，并安装了 Laravel 以及其他依赖包。<\/p>\n<\/li>\n
    • \n
      初始化 Laravel 模型<\/p>\n
      php artisan make:model MyModel<\/code><\/pre>\n<\/li>\n
    • \n
      设置路由和控制器<\/p>\n
      \/\/ app\/Http\/Controllers\/HomeController.php\nnamespace AppHttpControllers;\n\nuse IlluminateHttpRequest;\n\nclass HomeController extends Controller\n{\n   public function index()\n   {\n       return view('welcome');\n   }\n}\n\n\/\/ routes\/web.php\nRoute::get('\/', 'HomeController@index')->name('home');<\/code><\/pre>\n<\/li>\n
    • \n
      配置数据库迁移<\/p>\n
      php artisan migrate<\/code><\/pre>\n<\/li>\n
    • \n
      创建 Vue 组件<\/p>\n
      <template>\n <div>\n   <h1>{{ name }}<\/h1>\n   <button @click=\"increment\">Increment<\/button>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data() {\n   return {\n     name: 'World',\n   };\n },\n methods: {\n   increment() {\n     this.name = `${this.name}++`;\n   },\n },\n};\n<\/script><\/code><\/pre>\n<\/li>\n
    • \n
      在 Laravel 中使用 Vue 组件<\/p>\n
      \n<!-- resources\/views\/layouts\/app.blade.php -->\n<link href=\"{{ asset('css\/app.css') }}\" rel=\"stylesheet\">\n<script src=\"{{ asset('js\/app.js') }}\"><\/script>\n\n<!-- components\/VueComponent.vue -->\n<template>\n <div>\n   {{ message }}\n <\/div>\n<\/template>\n\n<script>\nimport axios from 'axios';\n\nexport default {\n props: ['message'],\n data() {\n   return {\n     loading: false,\n     error: null,\n   };\n },\n mounted() {\n   this.fetchData();\n },\n methods: {\n   fetchData() {\n     this.loading = true;<\/code><\/pre>\n<\/li>\n<\/ol>\n
      Comment: This line is not needed as the template already has a closing tag for it. suggestion <\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      Bug编译狮 Vue.js 是一个流行的前端框架，而 Laravel 是一&#20..<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","meta":{"_acf_changed":false},"tags":[],"my1js2nav":[44],"tuisongtax":[],"class_list":["post-834","my1js","type-my1js","status-publish","hentry","my1js2nav-laravel"],"acf":{"qian_art_seotitle":"","qian_art_seotitle_source":{"label":"SEO\u6807\u9898","type":"text","formatted_value":""},"qian_art_seokws":"","qian_art_seokws_source":{"label":"SEO\u5173\u952e\u8bcd","type":"text","formatted_value":""},"qian_art_stzhong":"","qian_art_stzhong_source":{"label":"\u4e2d | \u77ed\u6807\u9898","type":"text","formatted_value":""}},"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js\/834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/types\/my1js"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/media?parent=834"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tags?post=834"},{"taxonomy":"my1js2nav","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js2nav?post=834"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tuisongtax?post=834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}