Laravel-vite+vue开发前端模板
开始这篇文章的时候，你已经安装了laravel！你已经安装了laravel！你已经安装了laravel！
然后你的laravel服务器环境已经搭建好，应用可以正常访问
laravel vite plugin 官方原文
laravel默认已经集成vitejs,单纯使用vite只需要执行以下命令即可
npm install但是这里我们需要使用vue作为前端框架
npm install @vitejs/plugin-vuenode依赖安装完成后，然后执行下面的命令
npm run build
// or
num run dev开发过程当然是走dev。
num run dev 这条命令执行以后，控制台大概是这样的：
VITE v6.3.2 ready in 359 ms➜ Local: http://localhost:5173/➜ Network: use --host to expose➜ press h + enter to show helpLARAVEL v12.9.2 plugin v1.2.0➜ APP_URL: http://localhost注意这上面的两个链接，这是由vite插件生成的。我们不用管它。
手痒可以点开浏览器看看。看完关掉就好了
！！！！！但是哈！！！！！！
控制台窗口不要关！！！！！！
这个是前端开发环境的热插拔服务，
挂着这个窗口，我们正常访问laravel应用入口，可以看到一个demo页面
现在我们用浏览器挂着这个页面。
接下来修改应用根目录下的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: {// The Vue plugin will re-write asset URLs, when referenced// in Single File Components, to point to the Laravel web// server. Setting this to `null` allows the Laravel plugin// to instead re-write asset URLs to point to the Vite// server instead.base: null,// The Vue plugin will parse absolute URLs and treat them// as absolute paths to files on disk. Setting this to// `false` will leave absolute URLs un-touched so they can// reference assets in the public directory as expected.includeAbsolute: false,},},}),],
});到这里我们可以看到浏览器窗口的变化（css样式没了）,but.别急！
然后再laravel根目录下找到resources,
打开js路径添加一个Pages文件夹用来存放模板组件，你也可以起其他名字
然后新建一个Index.vue文件
接下来到vue官方文档复制一个Hello World贴到刚才创建的./Pages/Index.vue文件中
或者你也可以自己写一个demo (我超懒)
<!--
跟 Vue 说 Hello World！
--><script setup>
import { ref } from 'vue'// “ref”是用来存储值的响应式数据源。
// 理论上我们在展示该字符串的时候不需要将其包装在 ref() 中，
// 但是在下一个示例中更改这个值的时候，我们就需要它了。
const message = ref('Hello World!')
</script><template><h1>{{ message }}</h1>
</template>然后按照官方文档挂载组件：
打开./resources/js/app.js文件
import { createApp } from 'vue';
import Index from './Pages/Index.vue';const app = createApp(Index);app.mount('#app');
laravel的vite插件依旧是Blade模板的一个扩展。
所以接下来最后一步是把刚才的vue代码导入Blade
现在我们添加一个blade模板文件
打开./resources/views/
将默认的welcome.blade.php文件复制一个到当前目录，我给他起名index.blade.php
修改路由文件routes/web.php
<?phpuse Illuminate\Support\Facades\Route;Route::get('/', function () {return view('index'); //将默认模板改为index
});
接下来修改index.blade.php
清空模板文件里<body>标签的全部内容(水一下文)
<body></body>刷新浏览器，确认你看到的页面已经是一片空白
接下来就是见证奇迹的时刻：给清空的<body>标签添加一个名为app的id属性
<body id="app"></body>
然后刷新浏览器，你能正常看到Hello World!
本章就写到这里了！
有空再写laravel的模板标签在vue输出