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引入插件方法的更多相关文章

  1. Vue自定义插件方法大全

    新年第一天首先祝大家新年快乐,心想事成! 1.利用根实例构造函数的原型 //在构造函数的原型链上添加自定义属性 Vue.prototype.test = 'pomelo' //在其他组件中调用 con ...

  2. Vue引入插件

    引入Element ui 1.在当前目录下,运行:npm i element-ui -S  2.在src/main.js中添加代码 import ElementUI from 'element-ui' ...

  3. vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)

    1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...

  4. 在普通js文件里引入vue实例的方法

    首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...

  5. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...

  6. 创建vue项目及引入插件

    部署开发环境 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack cnpm install ...

  7. VUE滚动条插件——vue-happy-scroll

    最近自己在自学vue2.0,然后就自己摸索做一个简单的后台管理系统,在做的过程中,总感觉不同浏览器自带的滚动条样式不统一,也很难看,所以就在网上找一些使用vue的滚动条插件.最开始用的是Easy-sc ...

  8. 开发vue全局插件的4种方式

    定义全局插件的步骤 定义全局插件 pluginsUtil.js Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: ex ...

  9. vue封装插件并发布到npm上

    vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...

随机推荐

  1. vue-element-admin跟springboot+shiro部署爬坑记

    今天把前端采用vue-element-admin与springboot的项目部署到正是线上,在开发线上很OK的,一放上去我的天啊,坑是真的多阿.下面听我一一道来:我这边采用的是nginx服务器部署. ...

  2. python产生错误:can only concatenate str (not "int") to str

    代码为: #!/usr/bin/python # _*_ coding:utf-8_*_ # print("hello world!") name = input("na ...

  3. 配置linux ftp服务器,客户端报list remote folder fail

    XFTP出现列表文件夹失败.主要是因为FTP模式不对,应该为主动连接模式, 可以在设置主机属性 - 选项页签 - 将默认勾选的“使用被动模式”(使用消极模式)的多选框取消...就可以了...

  4. jquery属性方法hasClass判断是否存在某个class

    判断匹配集合中是否存在至少一个元素使用样式'selected',存在则返回'true',不存在为'flase'. <html> <head> <script src=&q ...

  5. Nginx 配置访问静态资源

    做个简单的配置: 以txt/png/mp4结尾的请求都会按照如下规则寻找返回文件 关键词: location.root location ~ \.(mp4|png|txt) { root /usr/l ...

  6. Educational Codeforces Round 33 (Rated for Div. 2) A题

    A. Chess For Three Alex, Bob and Carl will soon participate in a team chess tournament. Since they a ...

  7. PHP mysqli_field_seek() 函数

    定义和用法 mysqli_field_seek() 函数把字段指针设置为指定字段的偏移量. 设置结果集中第一个字段(列)的字段指针,然后通过 mysqli_fetch_field() 获取字段信息并输 ...

  8. luogu 3047 [USACO12FEB]附近的牛Nearby Cows 树形dp

    $k$ 十分小,直接暴力维护 $1$~$k$ 的答案即可. 然后需要用父亲转移到儿子的方式转移一下. Code: #include <bits/stdc++.h> #define M 23 ...

  9. Codevs 1629 01迷宫

    1629 01迷宫 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题目描述 Description 有一个由01组成的n*n格迷宫,若你位于一格0上,那么你可 ...

  10. 转:后置处理器JSON Extractor 提取json的多个值

    json串 []表示对象组成的数组,{}表示对象. 对象里包含多个 "属性":属性值.属性值可以是值,或数组,或对象. JSON Extractor使用json path表达式匹配 ...