打开项目的根目录,然后打开命令窗口,输入 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 httpserver

    python3: python -m http.server 80 python2: python -m SimpleHTTPServer 9004

  2. 1.4分布式-通讯协议TCP/IP

    服务器和浏览器的通讯依靠http协议,今天就来分析一下http协议的具体内容以及https的加密过程.除了这些协议,为了增加服务器和浏览器交互的可拓展性,也出现了rest风格的请求方式,方便调用接口. ...

  3. JavaScript 的正则也有单行模式了

    正则表达式最早是由 Ken Thompson 于 1970 年在他改进过的 QED 编辑器里实现的,正则里最简单的元字符 “.” 在当时所匹配的就是除换行符外的任意字符: "." ...

  4. PHP循环语句深度理解分析——while, for, foreach, do while

    循环结构   一.while循环  while(表达式)  {   循环体;//反复执行,直到表达式为假  } 代码: $index = 1; while ($index<5) {        ...

  5. jsonp简介

    jsonp主要是利用script的跨域.简单点说就是像img,css,js这样的文件是跨域的,这也就是为什么我们能够利用cdn进行加速的原因.而且像js这样的文件,如果里面是一个自执行的代码,比如: ...

  6. angularjs指令中的compile与link函数详解补充

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...

  7. Python mac安装mysqlclient的一个bug

    这是一个来自mysql官方的bug,反正我是看不懂. shuais-MBP:wxapp dandyzhang$ pipenv install mysqlclient Installing mysqlc ...

  8. Linux 一 些常用的命令

    查看当前系统JAVA的安装路径: echo $JAVA_HOME: 查看内核版本: uname -a ubuntu的防火墙 关闭:ufw disable开启:ufw enable 卸载了 iptabl ...

  9. 移动端调用电话、短信、唤起QQ和使用百度地图

    H5能很方便地实现这些功能,都是一句代码搞定 调用电话 <a href="tel:12345678"> 短信 <a href='sms:12345678'> ...

  10. Common Vulnerability Scoring System CVSS

    1.Generating a Shell payload using msfvenom 2.web intrusion Test in fact in the websecurity ,the web ...