打开项目的根目录,然后打开命令窗口,输入 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. HDU 5963(游戏 博弈+规律)

    题意是: 一群男生和一群女生玩游戏:给出一棵 n 个节点的树,这棵树的每条边有一个权值 0 或 1. 在一局游戏开始时,确定一个节点作为根.从女生开始,双方轮流进行操作. 当一方操作时,要先选择一个不 ...

  2. 第十节: EF的三种追踪实体状态变化方式(DBEntityEntry、ChangeTracker、Local)

    一. 简介 我们在前面章节介绍EF基本增删改的时候,曾说过EF的SaveChanges()方法,会一次性的将所有的实体的状态变化统一提交到数据库,那么你是否想过EF的实体会有哪些状态变化呢?什么原因会 ...

  3. 13、 使用openpyxl存储周杰伦的歌曲信息

      import requests import openpyxl res = requests.get('https://c.y.qq.com/soso/fcgi-bin/client_search ...

  4. 在 Visual Studio 中使用 IntelliTrace 快照功能

    今天发现vs2017 IntelliTrace有了一个快照功能,测试一下它的用法 1.选项->IntelliTrace->选择第三项 2.建一个控制台应用程序 3.在main中写一个简单的 ...

  5. 通信协议:HTTP、TCP、UDP

    TCP   HTTP   UDP: 都是通信协议,也就是通信时所遵守的规则,只有双方按照这个规则“说话”,对方才能理解或为之服务. TCP   HTTP   UDP三者的关系: TCP/IP是个协议组 ...

  6. div宽高不确定,内容居中

    当div的宽高不确定时候,内容居中:// 加在父级div中 垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:ce ...

  7. 【webpack】中file-loader和url-loader使用方法

    file-loader 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存.此外,这意味着 你可以就近管理图片文件,可以使用相对路径而不用担心部署时 URL 的问题.使用正确 ...

  8. Python3:递归实现输出目录下所有的文件

    今天来整理一下os库中方法的使用,如何输出一个目录下的所有文件? 1.首先介绍几个基本的的方法: 1)os.getcwd()  #返回当前工作目录 2)os.listdir()    #返回一个列表, ...

  9. spring事务源码分析结合mybatis源码(二)

    让我们继续上篇,分析下如果有第二个调用进入的过程. 代码部分主要是下面这个: if (isExistingTransaction(transaction)) { return handleExisti ...

  10. Python 概念小屋

     Python 中的 if __name__ == '__main__' 该如何理解 python多进程的理解 multiprocessing Process join run