html如何引入swiper,vue-cli webpack 引入swiper的操作方法
1:下载需要 swiper 的js文件和css文件
http://www.swiper.com.cn/
2:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下。
3:安装runtime:
npm install babel-runtime
4:修改.eslintrc.js文件如下: 最后一行添加
'globals': {
"Swiper": true
} //这个地方是新加入的 全局注入
5: vue模板中引入 swiper.min.js
import Swiper from '@/../static/js/swiper.min.js';
6: vue模板中引入 swiper-3.4.2.min.css
@import url("../../assets/css/swiper-3.4.2.min.css");
7: html 结构
8:vue js
mounted() {
var mySwiper = new Swiper('.home_banner .swiper-container', {
direction: 'horizontal',
loop: true
});
// Swiper 推荐课程
var swiper2 = new Swiper('.course_swiper_wrap .swiper-container', {
slidesPerView: 3,
paginationClickable: true,
nextButton: '.swiper-button-next-01',
prevButton: '.swiper-button-prev-01',
spaceBetween: 30,
freeMode: true,
loop: true
});
}
以上这篇vue-cli webpack 引入swiper的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
html如何引入swiper,vue-cli webpack 引入swiper的操作方法相关推荐
- Vue Cli webpack打包出现Waring :Critical dependency: the request of a dependency is an expression
错误信息: Waring 写法: let name = require(url); 如下写法,错误消失: let name = require(`${url}`);
- vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化 未引入 CDN前 main.js 更改CDN方式引入 在 vue.config 中引入 ...
- Vue CLI 3结合Lerna进行UI框架设计
第一次在掘金发文章,有点啰里啰嗦,大家见谅. 当前大部分UI框架设计的Webpack配置都相对复杂,例如Element.Ant Design Vue和Muse-UI等Vue组件库.例如Element, ...
- vue使用ts 引入组件_vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
- Vue项目搭建 + 引入ElementUI
初始化单页系统 在学习Vue的过程中,官方网站都是给了非常详细的介绍,所以初始化大型单页应用,官网给的参考资料地址:https://cn.vuejs.org/v2/guide/installation ...
- vue样式 引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 Jav ...
- vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门 在vue项目引入stylus css预处理器,可以让我们的c ...
- vue使用@路径引入
vue使用@路径引入,这个在项目中很常见: 项目中使用引入文件有时候路径比较深,需要使用"../../../xx.js"这种类似的路劲引入,这种方式比较笨,可以使用webpack的 ...
- Vue中import引入模块路径时的@符号
Vue中import引入模块路径时的@符号 1.ES6 模块主要有两个功能:export 和 import export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.j ...
最新文章
- 不存在从void转换到sqlist的适当构造函数_拷贝构造函数与赋值构造函数
- linux 硬件抽象,Linux 内核硬件抽象
- 石油大c语言答案,中国石油大学C语言答案
- js判断时间两小时之内_js判断两个时间的大小
- Redis 一个key-value存储系统 简介
- 记录docker开发hadoop,解决bug Datanode denied communication with namenode because hostname cannot be
- 旧访客设计模式的新生活
- usgs地震记录如何下载_用大叶草绘制USGS地震数据
- vue 跳添加编辑页面传两个值_vuecli3开发多页面项目
- SR-IOV(Single Root I/O Virtualization):将PCIe共享给虚拟机的标准
- AppWidget实现机制分析--什么是桌面插件
- iOS基础 - UIDynamic
- JXL读取,写入Excel
- 面试官:MyBatis的SQL执行流程说这么详细,网上抄的吧!
- ISA 发布内网 NLB
- CPU的工作原理浅析
- 【前端】html页面的字体代码表及字体效果对比
- ViewPager标签栏滑条
- 技术经理成长复盘-大重构
- 关于netty的中nettyio.netty.util.IllegalReferenceCountException: refCnt: 0, decrement: 1异常排除