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
文章评论