打开项目的根目录,然后打开命令窗口,输入 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的更多相关文章
-
Vue脚手架中默认的margin怎么清除
问题情景:开发中发现我的项目四周有白边,但是并没有设置样式 问题原因:vue脚手架中静态文件夹public中的index.html造成的 解决方案:找到vue脚手架中index.html页面,设置ma ...
-
vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
-
vue脚手架中使用axios
虽然之前用过n次,但大多都是直接在页面中引入axios.js的.今天想换种方式使用,一时间竟不知道怎么配置了.特此记录下. 1.npm 安装axios,文件根目录下安装,指令如下: npm inst ...
-
简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
-
Vue项目中执行npm run dev 不报错也不显示点击的地址链接
问题描述: 输入npm run dev 没有报错也没有显示可以点击的地址链接,如下图: 解决方法: 具体配置: autoOpenBrowser默认为false,改为true.重新 npm run de ...
-
vue脚手架中动态引用图片的办法
需要先导入: import logo_st_ga from '../assets/big_st_ga.png'; import logo_st_sp from '../assets/big_st_sp ...
-
vue项目中引入mint-ui的方式(全部引入与按需引入)
参考哦 https://blog.csdn.net/qq_36742720/article/details/83620584 https://jingyan.baidu.com/article/c1a ...
-
Vue属性中带’-‘的处理方式
我们在写属性时经常会加入’-‘来进行分词,比如:<panda from-here=”China”></panda>,那这时我们在props里如果写成props:[‘form-h ...
-
如何在Vue项目中使用Typescript
0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...
随机推荐
-
SQLServer子查询
in谓词子查询 select * from dbo.Worker where did in (select dID from DepartMent) 比较运算子查询 select * from Wor ...
-
禁止鼠标多次点击选中div中的文字
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Fire ...
-
js 终止页面加载
var xmlhttp = new XMLHttpRequest(); xmlhttp.abort(); window.stop();
-
Codeforces 4A-Watermelon(意甲冠军)
A. Watermelon time limit per test 1 second memory limit per test 64 megabytes input standard input o ...
-
《R语言入门与实践》第一章:R基础
前言 本章介绍了 R 语言的基础知识 界面: 使用命令 “ R “进行命令行的实时编译 对象 定义: 用于储存数据的,设定一个名称 格式: a <- 1:6 命名规则: 规则1:不能以数字开头规 ...
-
使用GOOGLE COLAB训练深度学习模型
使用 谷歌提供了免费的K80的GPU用于训练深度学习的模型.而且最赞的是以notebook的形式提供,完全可以做到开箱即用.你可以从Google driver处打开.或者这里 默认创建的是没有GPU的 ...
-
【原创】【状态压缩DP】POJ3254 Corn Fields【新手向】
一开始根本不会状压dp,上网各种找题解,但发现他们写的都很......反正我作为一个没有接触过状态压缩的,根本看不懂! 然后看了好多状态压缩的题的题解,总结了一下思路,思路很重要,有了思路转换成计算机 ...
-
simhash文章排重
原文链接:https://www.cnblogs.com/baochuan/p/9089244.html 背景 提升产品体验,节省用户感知度.——想想,如果看到一堆相似性很高的新闻,对于用户 ...
-
Spring Boot + Spring Cloud 构建微服务系统(一):服务注册和发现(Consul)
使用Consul提供注册和发现服务 什么是 Consul Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其它分布式服务注册与发现的方案,Consul ...
-
[资讯] NFC有什么作用。小米手机3NFC解读
在近几年的智能手机市场,NFC成了Android高端手机产品的标准配置,无论是Android还是Windows Phone阵营,有越来越多的厂商也开始为自己的产品加入NFC功能.而小米最新的旗舰产品— ...