33

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

  1. composer require laravel/ui
  2. php artisan ui vue
  3. php artisan ui vue --auth
4

10 回答 10

53

更新：如果你想在你的 Laravel ^8.0 应用程序中完全避免 Inertia / Livewire (Alpine.js) 脚手架并使用 Vue - 安装Laravel UI，它很可能会无限期地维护（扩展到实际的软件生命周期）。

在 Laravel 应用程序中安装 Vue（和旧的 auth 脚手架）的说明：

  1. 跑composer require laravel/ui
  2. 运行php artisan ui vue只是安装 Vue。
  3. 运行php artisan ui vue --auth以搭建身份验证视图。
  4. 跑npm install && npm run dev

但是，如果您仍想Vue.js与Livewire脚手架一起使用，请使用以下说明。

重要提示：请注意，Vue.js一旦安装，将控制 DOM，分离节点并替换它，删除其他 JS 侦听器。因此，如果您在与 Vue 相同的页面上使用 Livewire，那么脚手架Alpine.js随附的将Livewire无法正常工作。作为一种解决方法，您可以使用Livewire VueJS 支持插件。

  1. 跑npm install --save vue

  2. 将以下内容添加到您的资源/js/app.js：

     window.Vue = require('vue');
 Vue.component('example-component', require('./components/ExampleComponent.vue').default);
 const app = new Vue({
   el: '#app',
 });

  3. 在 resources/js/components 目录下创建一个 ExampleComponent.vue

    <template>
  <div>Hello World.</div>
</template>

<script>
  export default {
    mounted() {
      console.log("Example component mounted");
    }
  };
</script>

  4. 添加布局文件<script src="{{ asset('js/app.js') }}" defer></script>的<head>部分 ( resources/views/layouts/app.blade.php)

  5. id="app"在布局文件中添加<body>或主( )<div>resources/views/layouts/app.blade.php

  6. 添加<example-component />到您的视图

  7. 运行npm run dev或npm run watch

  8. 最后，打开 devtools，在控制台日志中你应该看到Example component mounted

于 2020-09-13T08:03:42.097 回答
23

在 laravel 8 项目中运行以下命令来安装 vue.js

  1. 跑composer require laravel/ui
  2. 安装 Vuephp artisan ui vue
  3. 使用身份验证安装 Vuephp artisan ui vue --auth
  4. 跑npm install && npm run dev
于 2020-11-20T13:13:28.727 回答
6

我为此浪费了很多时间，不想让人们经历同样的事情，所以我将教你如何安装 Vue.js 并使其快速运行。

如果你想从头开始

LaravelProject用您的项目名称替换

laravel new LaravelProject

在你的 Laravel 8 应用程序上安装 Vue.js

运行以下命令

composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
npm install 
npm run dev
npm run watch

既然您已经安装了所需的一切，请转到刀片视图并在其中添加以下代码<body></body>

<div id="app">
  <example-component />
</div>
<script src="{{ mix('/js/app.js') }}"></script>

如果您做对了所有事情，您将在视图渲染中看到以下文本

Example Component
Im an example component.

在您的控制台中： Component mounted.

于 2021-08-01T12:15:28.217 回答
3

你可以通过三种不同的方式在你的 laravel 项目中安装 Vue 3：

  1. 在页面上将其导入为 CDN 包
  2. 下载 JavaScript 文件并自行托管
  3. 使用 npm 安装它

1. 通过 CDN

在您的 HTML 文件中包含以下代码：

<script src="https://unpkg.com/vue@next"></script>

或使用以下链接进行生产：

https://cdnjs.com/libraries/vue

2. 自己下载和托管：

在此处从 GitHub 下载：

https://github.com/vuejs/vue-next

3. 通过 npm

npm 是使用 Vue 构建大型应用程序时推荐的安装方法。它与 Webpack (opens new window) 或 Rollup (opens new window) 等模块捆绑器很好地配对。Vue 还提供了用于创作单文件组件的随附工具。

在终端中运行此命令以获取最新的稳定版本

$ npm install vue@next

其次是：

npm install
于 2021-05-10T08:34:03.513 回答
1

运行命令

npm install vue

在资源/js/bootstrap.js

window.Vue = require("vue/dist/vue.min");

然后运行命令

npm run dev
于 2021-09-01T03:18:21.437 回答
0

你可以试试npm install --save vue

于 2020-09-12T10:08:40.780 回答
0

在现有的 Laravel 8 项目中，最好进行以下安装：

npm i -D vue@next @vue/compiler-sfc vue-loader@next

为了让您的项目正常工作，检查也很重要webpack.mix.js，它应该是这样的：

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

在使用项目时不要忘记：

npm run watch

希望对您有所帮助！

于 2021-11-04T10:24:10.240 回答
0

您可以在 laravel 8 上安装 vue，只需运行以下命令即可安装 laravel ui：

composer require laravel/ui

如果您想要登录页面、注册页面脚手架等授权，请从安装 laravel 项目的文件夹中运行以下命令：

php artisan ui vue

运行上述命令后，运行安装所有依赖项并编译所有样式资源：

npm install
npm run dev
npm run watch
于 2021-06-11T00:48:59.890 回答
0

在 Laravel 中设置 Vue

  1. 跑composer require laravel/ui
  2. 安装 Vuephp artisan ui vue
  3. 如果您使用 auth 安装 Vuephp artisan ui vue --auth
  4. 在页面母版中添加之后
  5. 跑npm install
  6. 跑 npm run dev
  7. 跑 PHP artisan serve
于 2021-04-30T11:14:45.560 回答
-1

**安装 Vue + Laravel 8

composer create-project laravel/laravel projectName --prefer-dist

composer require laravel/ui

php artisan ui vue

npm install

npm run dev

npm i vue-loader

npm install vue-router vue-axios

npm run dev

成功。

于 2021-11-10T04:01:05.123 回答