Laravel 前端:使用 Vue 组件 Draft
在 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 组件了。
评论已关闭