24年3月更新:laravel 11已经发布,更新一下。
背景
之前做的laravel 8.x和Vue2的网站有点旧了,想尝试升级。
结果每次都是安装和配置是最困难的……
还是做个记录吧。
基本思路
- 先安装Laravel框架作为基础;
其次安装Laravel要用的包,如Sanctum Telescope等 - npm手动安装vue各个包(不使用vue脚手架,与Laravel框架的文件夹结构很难凑一起)
包管理器安装
这里默认已经拥有php的Composer 2.4,以及node v18,
后面使用composer和npm安装。
Laravel安装
安装laravel
composer create-project laravel/laravel:^11.0 <项目名>
安装laravel的telescope扩展
composer require laravel/telescope --dev
(仅dev环境使用)
php artisan telescope:install
php artisan migrate
安装laravel的sanctum扩展
php artisan install:api
安装Laravel的Reverb扩展(laravel 11新的广播系统用)
php artisan install:broadcasting
Vue 安装
从npm安装vite(因为laravel已经配置好package.json,可自动安装vite)
npm install
安装laravel官方的vue插件(laravel 11开始,package.json已经写入了vue插件了"laravel-vite-plugin": "^1.0",
npm install --save-dev @vitejs/plugin-vue
配置vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel(['resources/js/app.js']),
vue({
template: {
transformAssetUrls: {
// Vue 插件会重新编写资产 URL,以便在单文件组件中引用时,指向 Laravel web 服务器。
// 将其设置为 `null`,则 Laravel 插件会将资产 URL 重新编写为指向 Vite 服务器。
base: null,
// Vue 插件将解析绝对 URL 并将其视为磁盘上文件的绝对路径。
// 将其设置为 `false`,将保留绝对 URL 不变,以便可以像预期那样引用公共目录中的资源。
includeAbsolute: false,
},
},
}),
],
});
不使用Vue脚手架,直接从npm安装
npm install vue@lastest
或者是
npm install vue
最后配置
在/resources/js/app.js作为入口js,加载vue
import { createApp } from 'vue'
const app = createApp({})
app.mount('#app')
在/resources/views/index.blade.php作为入口网页,加载app.js
<!DOCTYPE html>
<html lang="zh_CN">
<head>
@vite('resources/js/app.js')
</head>
<body>
<div id='app'> </div>
</body>
</html>
最后,把laravel的路由指向这个index.blade.php
在/routes/web.php
Route::get('/', function () {
return view('index');
});
大功告成!
之后前端从app.js开始扩展出去,加载各个vue单文件组件
后端从api.php开始写各种api接口。
(可选)一些vue插件和配置
路由vue-router:npm install vue-router@4
在routes.js配置路由信息
import { createRouter, createWebHashHistory } from 'vue-router'
import Test from '../vue/test.vue'
const routes = [
{ path: '/', component: Test },
]
const router = createRouter({
history: createWebHistory(),
routes, // `routes: routes` 的缩写
})
export default router
在app.js中导入
import router from './routes';
app.use(router)
状态管理pinia:npm install pinia
在app.js中导入
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)
Naive UI包: npm i -D naive-ui
文章评论