首页轮播图的配置

需要实现如图效果 

所以我们应用vant库现成的轮播图就好，按照文档安装好vant库之后，我们选择按需引入组件样式

安装vant库

1、根据文档下载好vant组件，再导入vant,这里我们采用按需引入

输入：

npm i unplugin-vue-components -D 

2、如果是基于 vue-cli 的项目，在 vue.config.js 文件中配置插件：

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

3、完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件

<template>
  <van-button type="primary" />
</template>

轮播图

引入

查阅最新文档，通过在main.js以以下方式来全局注册组件

import { createApp } from 'vue';
import { Swipe, SwipeItem } from 'vant';

const app = createApp();
app.use(Swipe);
app.use(SwipeItem);

但main.js中不提倡放太多的组件，所以我们创建一个plugins文件夹，创建index.js，来模块化管理

import { Swipe, SwipeItem,Button} from 'vant';
// 将导入的组件放入数组中
// 把这些组件都进行循坏，每一个都执行app.ues()
let plugins=[
    Swipe,SwipeItem,Button]
export default function getVant(app){
    plugins.forEach((item)=>{
        return app.use(item)
    })
}

再在main.js中导入getVant，最后使用轮播图就行

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 封装一个引入vant组件的配置文件，然后对外模块导出提供调用
import getVant from './plugins'
const app=createApp(App)
getVant(app)
app.use(store)
app.use(router).mount('#app')

--------------------------------------------------------分割线----------------------------------------------------------------根据最新的文档已经不需要在babel.configs.babel中重新配置，按照最新的文档，注册之后后可以直接使用，但模块化思想很值得学习

代码：

import { createApp } from 'vue';
import { Swipe, SwipeItem } from 'vant';

const app = createApp();
app.use(Swipe);
app.use(SwipeItem);