gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 06:37:19 25 4
gpt4 key购买 nike

我正在使用 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/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com