1,安装vue-awesome-swiper:

npm install vue-awesome-swiper@3.1.3 --save

2,安装swiper:

npm install swiper@5.2.0 -S

3,在main.js中引入插件

// 轮播
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css";

const app = createApp(App);
app.use(router);
app.use(store);
// 轮播
app.use(VueAwesomeSwiper);

4,报错:引入可能会报一下的错

 解决办法:

tsconfig.json文件中在compilerOptions 中添加 "noImplicitAny": false,

{
  "compilerOptions": {
    "noImplicitAny": false,
    .....
    .....
}

无法找到模块“vue-awesome-swiper/dist/ssr”的声明文件。“e:/work/1010/vue-front-1010/node_modules/vue-awesome-swiper/dist/ssr.js”隐式拥有 "any" 类型。
尝试 `npm install @types/vue-awesome-swiper` (如果存在),或者添加一个包含 `declare module 'vue-awesome-swiper/dist/ssr';` 的新声明(.d.ts)文件ts(7016)

解决办法:

卸载当前  Swipernpm uninstall swiper
安装低版本的  Swipernpm install swiper@5.4.5 --save

仅供参考:解决vue-awesome-swiper中swiper/css/swiper.css无法导入问题_syzdev的博客-CSDN博客_swiper/css/swiper.css

Logo

前往低代码交流专区

更多推荐