打开项目的根目录,然后打开命令窗口,输入 npm install swiper@4.4.1

@后为指定版本号,也可以不写

在main.js 中,引入

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css';

同时在你所要使用的vue文件中,再次引入,(不知道为什么还要再次引入,否则获取不到Swiper)

import Swiper from 'swiper'

然后在页面渲染完成后,初始化Swiper

var lunbo =new Swiper('#swiper', {
loop: true,
pagination: '.swiper-pagination',
autoplay: ,
paginationClickable: true
});

在vue脚手架中使用npm的方式使用swiper的更多相关文章

  1. Vue脚手架中默认的margin怎么清除

    问题情景:开发中发现我的项目四周有白边,但是并没有设置样式 问题原因:vue脚手架中静态文件夹public中的index.html造成的 解决方案:找到vue脚手架中index.html页面,设置ma ...

  2. vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem

    偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...

  3. Vue学习之--------组件在Vue脚手架中的使用(代码实现)(2022/7/24)

    文章目录 1.第一步编写组件 1.1 编写一个 展示学校的组件 1.2 定义一个展示学生的信息组件 2.第二步引入组件 3.制作一个容器 4.使用Vue接管 容器 5.实际效果 6.友情提示: 7.项 ...

  4. vue脚手架中使用axios

    虽然之前用过n次,但大多都是直接在页面中引入axios.js的.今天想换种方式使用,一时间竟不知道怎么配置了.特此记录下. 1.npm 安装axios,文件根目录下安装,指令如下:  npm inst ...

  5. 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

  6. Vue项目中执行npm run dev 不报错也不显示点击的地址链接

    问题描述: 输入npm run dev 没有报错也没有显示可以点击的地址链接,如下图: 解决方法: 具体配置: autoOpenBrowser默认为false,改为true.重新 npm run de ...

  7. vue脚手架中动态引用图片的办法

    需要先导入: import logo_st_ga from '../assets/big_st_ga.png'; import logo_st_sp from '../assets/big_st_sp ...

  8. vue项目中引入mint-ui的方式(全部引入与按需引入)

    参考哦 https://blog.csdn.net/qq_36742720/article/details/83620584 https://jingyan.baidu.com/article/c1a ...

  9. Vue属性中带’-‘的处理方式

    我们在写属性时经常会加入’-‘来进行分词,比如:<panda from-here=”China”></panda>,那这时我们在props里如果写成props:[‘form-h ...

随机推荐

  1. 收藏这些Safari快捷键,让你的Mac浏览网页更加方便

    文章内容及图片来源于:知乎,如果涉及版权问题,请联系作者删除 文章收录于:风云社区(提供上千款各类mac软件的下载) Safari是Mac上的原生浏览器,功能自然很强大,现在每天在Mac上使用的最多的 ...

  2. pandas常用函数之diff

    diff函数是用来将数据进行某种移动之后与原数据进行比较得出的差异数据,举个例子,现在有一个DataFrame类型的数据df,如下: index value1 A 0 B 1 C 2 D 3 如果执行 ...

  3. Web概述

    Web概述 1. JavaWeb 使用java开发的基于互联网的项目 2. 软件架构 C/S:客户端服务器架构 优点:用户体验好,很多数据在本地 缺点:安装.开发.部署.维护麻烦 B/S:浏览器服务器 ...

  4. MySQL无法插入中文的解决方案

    本人在做数据库的连接过程中,发现无法插入中文值.原因是mysql的默认编码是latin1,只须将编码改为utf8即可. 在mysql的命令行窗口中输入 status 会出现当前的编码.在mysql的安 ...

  5. 11招玩转黑客攻防——用Python,更安全

    Python真是无所不能,学习Python,一个暑假就够了 !! 入门Python,从黑客入手最好玩.最简单 !! 今天就推荐一本书<11招玩转网络安全——用Python,更安全> 内网攻 ...

  6. SSH框架之hibernate《二》

    Hibernate第二天     一.hibernate的持久化类和对象标识符         1.1持久化类的编写规范             1.1.1什么是持久化类:               ...

  7. throws与throw

    throws与throw 1)throws出现在方法函数头:而throw出现在函数体:    2)throws表示出现异常的一种可能性,并不一定会发生这些异常:throw则是抛出了异常,执行throw ...

  8. SpringBoot学习笔记<二>注解

    此篇为项目作结之笔记,关于注解. 项目启动入口@SpringBootApplication[必选]  @ServletComponentScan[可选] 注解后: Servlet.Filter.Lis ...

  9. stm32F10x复习-1

    地点:家 1.库文件说明 _htmresc: LOGO的设计图 Libraries: 源代码及启动文件 -- CoreSupport 核内设备函数层的CM3核通用的源文件.作用是为采用Cortex-M ...

  10. codeforces 787D - Legacy 线段树优化建图,最短路

    题意: 有n个点,q个询问, 每次询问有一种操作. 操作1:u→[l,r](即u到l,l+1,l+2,...,r距离均为w)的距离为w: 操作2:[l,r]→u的距离为w 操作3:u到v的距离为w 最 ...