vue引入插件方法
jQuery插件
npm install jquery --save-dev
需要用jQuery的文件中引入:
import $ from 'jquery'
轮播图插件
安装:npm install vue-awesome-swiper --save-dev
main.js中引入:
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper)
在需要的文件中使用:
<swiper :options="swiperOption">
<swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index"><img :src="item.img" alt="" /></swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
data() {
return {
slide: [{ img: require('@/assets/images/banner1.jpg')}, { img: require('@/assets/images/banner2.jpg')}, { img: require('@/assets/images/banner3.jpg')}],
swiperOption: {
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
autoplay: {
delay: 3000
},
loop: true,
mousewheel: true
},
};
},
设置浏览器标题(title)插件:
安装:npm install vue-wechat-title --save
main.js中引入:
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
在需要的文件中使用:
加上下面这句话即可
<div v-wechat-title="首页--XX公司"></div>
js-cookie插件
npm install --save js-cookie
vue引入插件方法的更多相关文章
- Vue自定义插件方法大全
新年第一天首先祝大家新年快乐,心想事成! 1.利用根实例构造函数的原型 //在构造函数的原型链上添加自定义属性 Vue.prototype.test = 'pomelo' //在其他组件中调用 con ...
- Vue引入插件
引入Element ui 1.在当前目录下,运行:npm i element-ui -S 2.在src/main.js中添加代码 import ElementUI from 'element-ui' ...
- vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)
1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...
- 在普通js文件里引入vue实例的方法
首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...
- Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...
- 创建vue项目及引入插件
部署开发环境 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack cnpm install ...
- VUE滚动条插件——vue-happy-scroll
最近自己在自学vue2.0,然后就自己摸索做一个简单的后台管理系统,在做的过程中,总感觉不同浏览器自带的滚动条样式不统一,也很难看,所以就在网上找一些使用vue的滚动条插件.最开始用的是Easy-sc ...
- 开发vue全局插件的4种方式
定义全局插件的步骤 定义全局插件 pluginsUtil.js Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: ex ...
- vue封装插件并发布到npm上
vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...
随机推荐
- Sourcetree 出现错误提示git -c diff.mnemonicprefix=false -c core.quotepath=false fetch origin
具体表现为:sourcetree无法和gitlab远程仓库进行交互,但使用本地cmd,可以使用git命令和远程仓库交互通过各种账户.秘钥等操作,都无法解决该问题具体信息如下: 解决方式:点击 工具–& ...
- 数据库底层索引为什么用B树
注意B-树就是B树,-只是一个符号. 简介 B/B+树是为了磁盘或其它存储设备而设计的一种平衡多路查找树(相对于二叉,B树每个内节点有多个分支),与红黑树相比,在相同的的节点的情况下,一颗B/B+树的 ...
- VMware厚置备延迟置零,厚置备置零,精简置备详解
1.厚置备延迟置零(zeroed thick) 以默认的厚格式创建虚拟磁盘.创建过程中为虚拟磁盘分配所需空间.创建时不会擦除物理设备上保留的任何数据,但是以后从虚拟机首次执行写操作时会按需要将其置零. ...
- FFmpeg学习笔记之安装
本随笔原文出自:一叶知秋0830链接:https://www.jianshu.com/p/ab469a2ffd28 1.下载FFmpeg 先进入要存放下载文件的目录,比如要放在/Users/qinji ...
- grep匹配命令
关于匹配的实例: 统计所有包含“48”字符的行有多少行 grep -c "48" demo.txt 不区分大小写查找“May”所有的行) grep -i "May&q ...
- PHP实现省市区关键词搜索邮编
前两天做了一个项目, 其中有一个需求是根据用户输入的关键词查询邮编. 最开始设计的数据库结构是省市区分为三个字段, province, city, area, 但是在写代码实现的过程中发现, 用户只输 ...
- JSP大文件分片上传
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
- HZOJ 20190818 NOIP模拟24题解
T1 字符串: 裸的卡特兰数题,考拉学长讲过的原题,就是bzoj3907网格那题,而且这题更简单,连高精都不用 结论$C_{n+m}^{n}-C_{n+m}^{n+1}$ 考场上10min切掉 #in ...
- Noip2016 提高组 Day1
T1 玩具迷题 直通 思路: 1.首先根据数据范围来看,储存小人的姓名开一个二维char数组即可(不会开爆) 2.然后看他给出的样例以及条件什么的,能够确定出 ①朝内向右,朝外向左均为+ ②朝内向左, ...
- 【转载】BERT:用于语义理解的深度双向预训练转换器(Transformer)
BERT:用于语义理解的深度双向预训练转换器(Transformer) 鉴于最近BERT在人工智能领域特别火,但相关中文资料却很少,因此将BERT论文理论部分(1-3节)翻译成中文以方便大家后续研 ...