货物

如何在 Vue.js 3 中使用 Laravel

Vue.js 是最常用的 JavaScript 框架之一，用于创建 Web 界面和单页应用程序，它与 Laravel 一起成为一个非常强大的开发工具。

对于 Web 应用程序的开发，广泛使用的工具是 vuejs，在本文中我们将了解如何在 Laravel 中安装和使用它。 Vue.js 框架是 defi尼托 渐进式框架 因为它专门用于创建 HTML 视图，并允许您轻松地与其他库和项目的组件集成。

Vue.js 的成功也是因为选择了 Laravel 建议将其作为前端框架，从而导致 2.0 版的发布。

Laravel 项目创建

第一步当然是在 Laravel 中创建一个新项目。如果您的计算机上有一个，请使用它，或者您可以为本教程创建一个新的。

composer create-project laravel/laravel guide-laravel-vue

项目启动后，您将需要安装 les npm 上瘾。为此，请在项目目录中运行以下命令：

npm install

安装依赖项后，运行以下命令来构建资源并确保一切正常：

npm run dev

命令 npm run dev 执行各种检查和构建，特别是 Laravel Mix 编译文件 resources/js/app.js 和文件 resources/css/app.css 在文件中 public/js/app.js e public/css/app.css.

完成后如果一切正常，您将看到如下内容：

安装 Vue.js

准备好 Laravel 项目后，我们可以继续安装 Vue.js 3。为此，请在项目目录中运行以下命令：

npm install --save-dev vue

这将安装 Vue.js 作为开发依赖项之一。编译资产后，您的生产 JavaScript 文件将是独立的，因此您只需安装 Vue.js 作为开发依赖项。

为确保 Vue 3 已正确安装，请打开文件 package.json （存在于项目根目录中）并搜索 "vue" 在节 "devDependencies":

// package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.37"
    }
}

可以看到，版本号表示已经安装了Vue.js 3。

第一次尝试 Vue.js

在您的 welcome.blade.php 文件中放置以下代码：

<div id="vue-app">
    {{ text }}
</div>
<script>
window.vueApp = new Vue({
  el: '#vue-app',
  data: {
    text: 'Hello World from Vue!'
  }
});
</script>

如您所见，我们已经创建了一个元素 div 同 id “vue-app”。在 script 元素内，我们创建了一个 Vue 实例，在其中我们将一个对象传递给构造函数，该对象允许我们 defi在我们的例子中，完成一些应用程序参数，例如数据和行为：

el：对元素的引用 div defi在html中完成
日期：数据集

一旦对象被创建， Vue 获得 div 同 id vue-app 并负责替换占位符 {{ text }} 包含在数据对象中的值。当然，这个对象可以包含多个属性，甚至是不同的类型：数字、数组和其他嵌套对象都是有效的

除了这个替换之外，Vue 还激活了它的引擎并使应用程序响应，即对文本属性的任何更改都会导致 HTML 中相应元素的即时更新。

Vue.js的第二次测试

要继续进行第二次试用，您首先需要实例化该应用程序以创建一个新组件。你打开 resources/app.js (o resources/js/app.js) 并更新其内容如下：

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

在这个文件中，我们创建了一个新的 Vue.js 实例，为此我们需要一个名为 HelloVue.vue 的 Vue 组件。了解更多信息查阅官方文档 .

创建一个新文件 resources/components/HelloVue.vue 并输入以下代码：

// resources/components/HelloVue.vue

<template>
  <h1>Hello Vue!</h1>
</template>

<script>
export default {
    name: 'HelloVue'
}
</script>

我们刚刚创建的文件是一个基本的 Vue.js 组件，用于打印 Hello Vue! 如何 header1 在页面上。最后，打开 webpack.mix.js 项目根目录中的文件并更新其内容，如下所示：

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({
        version: 3,
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

在这个文件中，方法调用 .vue() 将编译任何 Vue.js 代码并将其捆绑到生产 JavaScript 文件中。该函数接受一个对象，您可以 defi完成您正在使用的 Vue.js 版本。

编辑文件后 webpack.mix.js 你需要编译javascript代码。为此，我们再次运行命令 npm run dev.

最后，要在操作上尝试 Vue，请打开文件 resources/views/welcome.blade.php 并输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel Vue</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <hello-vue />
    </div>
</body>
</html>

该代码与之前创建的组件一起将生成一条视频消息 你好！，由于 Vue.js 实例被安装在一个 HTML 元素上 id app.

使用运行您的应用程序 php artisan serve, 然后在您喜欢的浏览器中打开它。

Ercole Palmeri

你也可能对此有兴趣 ...