Laravel 前端：使用 Vue 组件 Draft

作者：System 时间：2024年08月27日分类：所有,php 字数：1284

这篇文章距离上次修改已过429天，其中的内容可能已经有所变动。

在 Laravel 项目中使用 Vue 组件，你可以遵循以下步骤：

安装 Vue 和 Laravel Mix（如果尚未安装）：




npm install vue
npm install laravel-mix --save-dev

在 Laravel 项目中的 resources/js 目录下创建一个 Vue 组件文件，例如 MyComponent.vue：




<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      title: 'Hello World'
    }
  }
}
</script>

在 resources/js 目录下创建一个新的 JS 文件，例如 app.js，并在其中导入 Vue 和你的组件，然后创建一个新的 Vue 实例并挂载你的组件：




import Vue from 'vue';
import MyComponent from './MyComponent';
 
const app = new Vue({
  el: '#app',
  components: {
    MyComponent
  }
});

修改 webpack.mix.js 文件以编译你的 Vue 组件和其他资源：




const mix = require('laravel-mix');
 
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

运行 Laravel Mix 来编译你的资源：




npm run dev

在 Blade 模板中使用 Vue 实例（例如 resources/views/welcome.blade.php）：




<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <!-- ... -->
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

这样，你就可以在 Laravel 项目中使用 Vue 组件了。

Laravel 前端：使用 Vue 组件 Draft

评论已关闭

推荐阅读