使用 Laravel10 和 Vue3 创建单页应用程序单入口单页面应用

作者：fang 2023-12-12 12:12:13 分类：代码片段阅读（407） 0

安装laravel10 项目

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

配置路由修改 project\routes\web.php

1
2
3

Route::get('/{any}',function(){
return view('welcome');
})->where('any','.*');

修改入口文件 project\resources\views\welcome.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!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 10 + Vue3 Demo</title>
</head>
<body>
<div id="app">

</div>
@vite('resources/js/app.js')
</body>
</html>

以下是Vue相关

1
2
3

npm install vue-router
npm install vue-loader
npm install @vitejs/plugin-vue

创建路由文件, 创建视图文件夹project\resources\js\pages,并创建home.vue,about.vue,hello.vue三个文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

touch project\resources\js\routes.js
mkdir project/resources/js/pages
touch project/resources/js/pages/App.vue
touch project/resources/js/pages/Home.vue
touch project/resources/js/pages/Hello.vue
touch project/resources/js/pages/About.vue

routes.js添加内容:
import {createRouter, createWebHistory} from 'vue-router'

const Home = () => import('./pages/home.vue')
const About = () => import('./pages/about.vue')
const Hello = () => import('./pages/hello.vue')

//路由数组
const routes = [ //配置路由，这里是个数组
{
path: '/', //链接路径
name: 'Home', //路由名称，
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/hello',
name: 'Hello',
component: Hello
}
]

//路由对象
const router = createRouter({
history: createWebHistory(),
routes //上面的路由数组
})
export default router

修改project/resources/js/app.js

1
2
3
4
5
6
7
8
9

import './bootstrap';

import {createApp} from 'vue'

import App from './pages/App.vue'
import router from './routes';

createApp(App).use(router).mount("#app")

修改project/resources/js/pages/App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
<div>
<h1>Vue Router Demo App</h1>

<p>
<router-link :to="{ name: 'Home' }">Home</router-link> |
<router-link :to="{ name: 'About' }">About</router-link> |
<router-link :to="{ name: 'Hello' }">Hello</router-link>
</p>

<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {}
</script>

project/resources/js/pages/Home.vue

1
2
3

<template>
<p>This is the homepage</p>
</template>

赞(1) 打赏

标签：

上一篇：Python Selenium 删除指定标签, 删除注释,执行js脚本

下一篇：全国省市区街道免费API 接口

使用 Laravel10 和 Vue3 创建单页应用程序单入口单页面应用

相关推荐

共 0 条评论关于"使用 Laravel10 和 Vue3 创建单页应用程序单入口单页面应用"

点击取消

使用 Laravel10 和 Vue3 创建单页应用程序 单入口单页面应用

相关推荐

共 0 条评论关于"使用 Laravel10 和 Vue3 创建单页应用程序 单入口单页面应用"

点击取消

使用 Laravel10 和 Vue3 创建单页应用程序单入口单页面应用

共 0 条评论关于"使用 Laravel10 和 Vue3 创建单页应用程序单入口单页面应用"