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 项目名称此命令创建我们的项目的目录, ...
随机推荐
- 生成漂亮报告的Go语言代码检查工具
上篇文章,老司机给各位同学介绍了Go语言的静态代码测试“三板斧”以及Go语言的testing类库. “三板斧”简洁明了,但是缺点也很明显,命令行执行,命令行输出.适合研发攻城狮看,不适合交给领导过目. ...
- python_模块1
1.将指定的字符串进行加密 # 导入模块 import hashlib def get_md5(data): # 获取hashlib模块中的md5加密算法 obj = hashlib.md5() # ...
- BZOJ3157 国王奇遇记——神奇的推式子
先膜一发Miskcoo,大佬的博客上多项式相关的非常全 原题戳我 题目大意 求 \[\sum\limits_{i=1}^{n}i^mm^i\] 题解 设一个函数\(f(i)=\sum\limits_{ ...
- Java笔记(基础第三篇)
面向对象的特点: 封装 继承 多态 类的构造方法 如果在类中定义的构造方法都不是无参的构造方法,则编译器不会为类设置一个默认的无参构造方法,当视图调用无参构造方法实例化一个对象时,编译器会报错,所以只 ...
- Java笔记(基础第二篇)
声明数组 数组元素类型 数组名字[]; 数组元素类型[] 数组名字; 分配内存空间 数组名字 = new 数组元素类型[数组元素的个数] 其中使用new关键字为数组分配内存时,数组中各个元素的初始化值 ...
- SpringBoot项目中使用Bootstrap 的CSS、JS资源
首先 需要在 application.properties 文件中添加这句 spring.mvc.static-path-pattern=/** 不然是使用不了的 还有一种办法就是 使用bootstr ...
- .net System.Net.Mail 之用SmtpClient发送邮件Demo
private static bool sendMail() { try { //接收人邮箱 string SendTo = "XXXXX@163.com ...
- 【EXE报错】win10运行C#程序保存报错:HTTP 无法注册URL ,进程不具有此命名空间的访问权限
在win10系统运行C#程序出现以下报错 异常信息 [1]异常信息:HTTP 无法注册 URL http://+:13000/Core/Real/HandheldService/.进程不具有此命名空间 ...
- Hibernate 4 升级到 Hibernate 5 的时候 SessionFactory 不能使用
在 Hibernate 4 升级到 5 的时候老的 sessionFactory 出现错误. public static SessionFactory initSession() { Configur ...
- 科大讯飞语音转文字,ffmpeg将wav转成pcm二进制音频文件
百度和讯飞和其他厂都提供了语音识别的接口,这里使用讯飞的识别将本地手机录的音频文件转成文字 以下注意事项: 1.X_Param 参数开始的时候带了空格导致验证不过,原因是讯飞将字符串做了repelce ...