怎么在laravel框架里使用vue
时间: 2023-07-15 17:10:53 浏览: 57
在 Laravel 中使用 Vue.js 可以通过以下几个步骤实现:
1. 在 Laravel 项目中安装 Node.js 和 NPM。
2. 安装 Laravel Mix。
```bash
npm install --save-dev laravel-mix
```
3. 安装 Vue.js。
```bash
npm install --save vue
```
4. 在 Laravel 项目的 resources/assets/js 目录中创建 Vue.js 组件。例如,可以创建一个名为 Example.vue 的组件。
```html
<template>
<div>
<h1>Hello World!</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!',
}
}
}
</script>
```
5. 在 Laravel 项目的 resources/assets/js/app.js 文件中引入 Vue.js 和创建的组件。
```javascript
require('./bootstrap');
import Vue from 'vue';
import Example from './components/Example.vue';
const app = new Vue({
el: '#app',
components: {
Example,
}
});
```
6. 在 Laravel 项目的 resources/views 目录中创建 Blade 模板。例如,可以创建一个名为 welcome.blade.php 的模板。
```html
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
</head>
<body>
<div id="app">
<example></example>
</div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>
```
7. 在 Laravel 项目的 routes/web.php 文件中定义路由。
```php
Route::get('/', function () {
return view('welcome');
});
```
8. 运行 Laravel Mix 编译前端资源。
```bash
npm run dev
```
9. 在浏览器中访问 http://localhost:8000 即可看到 Vue.js 组件在 Laravel 中的使用效果。
以上是在 Laravel 中使用 Vue.js 的基本步骤,根据实际情况进行适当调整。