vue.js - 如何在 Laravel 8 中安装 Vue.js

标签 vue.js laravel-8

我正在使用 laravel 8现在我想安装 Vue.js .我正在尝试这样

  • composer require laravel/ui
  • php artisan ui vue
  • php artisan ui vue --auth
  • 最佳答案

    更新:如果您想完全避免 Laravel ^8.0 应用程序中的 Inertia/Livewire (Alpine.js) 脚手架并使用 Vue - 安装 Laravel UI ,这很可能会无限期地保持下去。
    在 Laravel 应用程序中安装 Vue(和旧的身份验证脚手架)的说明:

  • 运行 composer require laravel/ui
  • 运行 php artisan ui vue仅用于安装 Vue。
  • 运行 php artisan ui vue --auth用于搭建 auth View 。
  • 运行 npm install && npm run dev

  • 但是,如果您仍然想使用 Vue.jsLivewire脚手架,请使用以下说明。
    重要提示:请注意 Vue.js一旦安装,就控制 DOM,分离节点并替换它,删除其他 JS 监听器。因此,如果您在 Vue 的同一页面上使用 Livewire,Alpine.js附带 Livewire脚手架不起作用。作为解决方法,您可以使用 Livewire VueJS support plugin.
  • 运行 npm install --save vue
  • 将以下内容添加到您的 resources/js/app.js:
     window.Vue = require('vue');
     Vue.component('example-component', require('./components/ExampleComponent.vue').default);
     const app = new Vue({
       el: '#app',
     });
    
  • 在 resources/js/components 目录下创建一个 ExampleComponent.vue
    <template>
      <div>Hello World.</div>
    </template>
    
    <script>
      export default {
        mounted() {
          console.log("Example component mounted");
        }
      };
    </script>
    
  • 添加 <script src="{{ asset('js/app.js') }}" defer></script><head>布局文件的一部分 ( resources/views/layouts/app.blade.php )
  • 添加 id="app"<body>或主要 <div>在您的布局文件中 ( resources/views/layouts/app.blade.php )
  • 添加 <example-component />你的看法
  • 运行 npm run devnpm run watch
  • 最后,打开 devtools,在控制台日志中你应该看到 Example component mounted
  • 关于vue.js - 如何在 Laravel 8 中安装 Vue.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63853750/

    相关文章:

    javascript - Vue 如何使用渲染函数回退到默认渲染?

    vue.js - 如何通过 vuex 使用 v-if 隐藏段落?

    vue.js - 命名路由 : Expected "x" to be defined 缺少参数

    php - 未找到 InvalidArgumentException View [layouts.app]。 Laravel-8 LiveWire-2

    php - Laravel Voyager 菜单未更新

    javascript - 如何在 VueJS 中添加自定义排序?

    reactjs - 错误 : Prevent writing to file that only differs in casing or query string from already written file. reactjs laravel

    javascript - 如何使用 Laravel 代码作为 Ajax 响应

    Laravel Auth 注销不起作用 - 之前发布的此问题的答案不起作用

    php - 目标类不存在。 Laravel 8 中的问题