打开项目的根目录,然后打开命令窗口,输入 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. python 爬虫之beautifulsoup(bs4)使用 --待完善

    #!/usr/bin/env python # -*- coding:utf- -*- from bs4 import BeautifulSoup import requests url = 'htt ...

  2. 使用Maven插件构建Spring Boot应用程序镜像

    使用Maven插件构建Spring Boot应用程序的Docker镜像. 环境准备 1.Linux系统 2.安装JDK,Maven 3.安装Docker 应用实践 1.在应用程序根目录下添加Docke ...

  3. MyBatis # $区别

    方式一: <select id="getUserById" resultType="User" parameterType=”int”> SELEC ...

  4. Nginx web 服务器 安装篇

    Nginx介绍: 静态web服务器有Nginx .Apache .lighttpd等 目前国内用的最常见的就是Nginx 和Apache 是一个开源的.支持高性能.高并发的www服务和代理服务软件,N ...

  5. 字典dict

    dictionary,在其他语言中常称为map 是一种 键-值 (key-value)存储结构,具有几块的查找速度 声明方法 dict名 = {'键名1':值1,'键名2':值2--} >> ...

  6. java反射常用类

    测试实体类 public class TestClass { public String classInfo; public String getClassInfo() { return classI ...

  7. How to avoid the 0-byte file on Webclient download error

    _client.DownloadDataAsync(new Uri(url)); _client.DownloadDataCompleted += (sender, e) => { try { ...

  8. [转] Python 字符编码判断

    转自:http://www.cnblogs.com/dkblog/archive/2011/03/02/1980644.html 法一: isinstance(s, str) 用来判断是否为一般字符串 ...

  9. RabbitMQ环境搭建

    消息 RabbitMQ  1.安装erlang环境 2.安装rabbitmq 3.参考资料 AMQP协议,可以跨语言通信 Advance Message Queuing Protocol Rabbit ...

  10. Sql Server 字符串操作总结

    SQL Server 支持两种字符数据类型---常规和Unicode:常规类型包括char 和varchar:unicode包括nchar 和nvarchar.常规的每个字符占用一个字节存储,而uni ...