在laravel10+框架中使用vant4库流程步骤

Laravel  /  管理员 发布于 1年前   302

Vant是一个轻量级和可靠的移动Vue组件库。Vant是一个移动组件库，由前端团队开源。

所以使用vant构建手机页面也是主流解决方案之一。它还是业界主流的移动组件库之一。

进入步骤：

安装vue、vant插件

npm install --save-dev @vitejs/plugin-vue //安装VUE插件
npm i @vant/auto-import-resolver unplugin-vue-components -D  //vant插件

vite.config.js 文件以满足项目需求：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
export default defineConfig({
    /*server: {
       host: 'www.xxxx.com',
       port: 51730,
       https: true,
   },*/
    plugins: [
        laravel(['resources/js/app.js']), // 确保这里是你的入口文件
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        Components({
            resolvers: [
                VantResolver({
                    // 这里可以有一些配置，如果你想要自定义它
                    // 比如 importStyle: 'less',
                }),
            ],
        }),
    ],
});

在这个配置中，你使用了 unplugin-vue-components 插件，

并配置了 VantResolver 作为一个解析器，

这将允许你在 Vue 组件中自动导入 Vant 组件而不需要手动导入它们。

这意味着你可以直接在你的 .vue 文件中使用 <van-button> 等标签，

而无需在 script 部分导入 Button 组件。

确保你的 resources/js/app.js 文件看起来像这样：

import { createApp } from 'vue';
import App from './App.vue'; // 你的根组件
const app = createApp(App);
// 这里不再需要手动注册 Vant 组件
// app.use(Button); // 不需要这行代码了
app.mount('#app');

在你的根组件 App.vue 或任何其他 .vue 文件中，

你现在可以直接使用 Vant 组件：

<template>
  <div>
    <van-button type="primary">按钮</van-button>
  </div>
</template>
<script>
export default {
  // 组件的其余部分
};
</script>

确保你的Blade模板中有一个元素与Vue应用挂载的元素ID相匹配：

<div id="app"></div>
@vite('resources/js/app.js')

这样配置后，Vant 组件应该能够在你的 Vue 应用中自动导入，并且在你的 Laravel 应用中正确显示。

如果你遇到任何问题，确保检查你的浏览器控制台中是否有错误，

并查看网络请求以确保所有资源都被正确加载。