1.安装jQuery npm i jquery -S 2.修改webpack的配置文件 文件目录及名称:build/webpack.base.conf.js 注释代码为修改部分 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf…

一.问题: 最近在写vue项目时,想引入某些非模块化的第三方插件时,总是发现会有报错.且在与本地运行插件测试对比时发现插件根本没有注入到jQuery中(console.log($.fn)查看当前jq有哪些方法),例如: 本地测试 Vue页面测试 Object [jquery: "1.10.2", …] Object [jquery: "1.10.2",…] . . . . . .val: ƒ (e) val: ƒ (e)velocity: ƒ () width: ƒ…

有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div c…

axios 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 转化请求和返回 取消请求 自动转化json数据 客户端支持抵御 安装 使用npm: $ npm i axiso 为了解决post默认使用的是x-www-from-urlencoded 去请求数据,导致请求参数无法传递到后台,所以还需要安装一个插件QS$ npm install qs 一个命令全部解决…

1.安装vue-layer插件 npm install vue-layer --save-dev 2.打包入口文件main.js中引入vue.vue-layer.并且将vue-layer添加到vue原型 import Vue from 'vue'; import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 3.然后打包报如下错误 ERROR in ./node_modules/vue-layer/dist/vue-layer…

网上找了很多,最后还是官网最完整. https://github.com/surmon-china/vue-awesome-swiper 安装: 1.npm install vue-awesome-swiper --save 2.全局安装 在main.js中 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper…

1.cnpm install jquery2.在webpack.base.conf.js中加入一行代码 const webpack=require("webpack") ------------------------------------------ const webpack = require('webpack') 'use strict' const path = require('path') const utils = require('./utils') const c…

…

创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default $; 导入JQuery,并赋值给window对象,使其成为一个全局变量. 在vue组件做如下引用 import $ from './assets/jquery-v'; import 'bootstrap-material-design'; //调用初始化 $(function(…

vue中的项目目录assets和staitc的区别 在进行发行正式版时,即为npm run build编译后, assets下的文件如(js.css)都会在dist文件夹下面的项目目录分别合并到一个文件下面去, 而static文件下面的文件则会原封不动的放到dist文件夹下面的目录中去: 所以第三方插件等放在static目录下面:css.js等放在assets目录下面: 而image等本地图片等放在static目录下面,build编译后不会出现路径问题 嗯,就酱~~ 感谢分享 https://b…

只使用jquery: 1.  cnpm install jquery --save 2.   cnpm install @types/jquery --save-dev (不使用ts的不需要安装此声明文件) 3.在使用jquery的文件中:  import $ from 'jquery';     ----------以上便可以在项目中使用jQuery,线面讲解如何在项目中使用jquery的第三方插件 -------- 以jquery-caret为例 1. 按上面步骤安装完jquery后,修改w…

vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-class/leave-active-class入场离场属性但是设置的值前面必须加上animated(当然也可以不在transition上设置animated,可以在你所要进行动画的标签上设置class属性为animated)4.也可以加入:duration来统一设置入场和离场时候的时长案例如下 <!…

前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装,主要提供思路,封装方法大同小异·,文章略长要有耐心. gitment gitment是一个基于github issues封装的评论插件,以这个插件作为演示,把它封装成vue插件.vue-gitment,该插件已发布到npm,并在自己的开源项目vueblog中安装使用 项目初始化 封装vue的插件用…

前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如何引入第三方插件或者库(仅仅只是一部分,如果没有您想要的可以自行百度),那么一起来看看吧! 本章目标 学会vue-cli项目中引入jQuery 学会vue-cli项目中引入Bootstrap vue-cli项目中引入jQuery和Bootstrap 首先我们需要引入的是jQuey这个库,毕竟作为一名…

vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: 1.首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如: <template> <div> loading.............. </div…

一.安装插件 npm install vue-video-player --save 二.配置插件 在main.js中全局配置插件 import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use(VideoPlayer) 三.使用插件 在vue组件中的程序如下: <template>…

一.Bootstrap 响应式按钮 <div calss="col-sm-2"> <button class="btn btn-default btn-block"> </div> 表现结果:手机上全宽 桌面上2列宽 原理;btn-block 会将按钮变成全宽 但是在桌面上col-sm-2会失效 按钮被设置在2列宽 在手机上 col-sm-2失效(手机的尺寸是xs) 二.在自己的项目中整合第三方插件或功能   1.找到所有的依赖项…

实现原理:父容器固定高度,并设置属性overflow: hidden,使得子元素高度超出容器后能被隐藏.better-scroll作用在父容器上.1.npm安装better-scroll插件.npm install--save better-scroll2.在文件中引入better-scroll.import BScroll from 'better-scroll';用法:new BScroll(Dom对象,{//opsitons});在Vue中要获得Dom对象,需设置标签属性‘v-el’.例如…

layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue开发.在开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导入,这时就需要修改一下它的源码.在看过它的源码后,发现需要修改的地方只有两处, 源码中已经暴露了一个全局变量layer,故只需在脚本末尾处添加 export default layer; 这表示将这个全…

不同于Ionic1中插件的调用,Ionic2提供了Ionic Native.Ionic Native封装了一些常见的插件(如:Camera.Barcode Scanner等),这些插件的使用方式在官方文档中有详细的描述.今天我们所说的第三方插件就是指Ionic Native中没有,但在Ionic1中可以使用的插件. 创建新项目 ionic start JPush --v2 --id dpary.jpush.demo 运行以上命令,创建包名为“dpary.jpush.demo”的Ionic2应用.…

Vue中的v-model指令只是一个语法糖,其具体实现是:监听input框的input事件,然后将用户输入的值赋值给input框的value属性 <input type="text" :value="name" v-on:input="name = $event.target.value"> 日期插件的实现是:选择好日期后,将值赋给input框,然而此时并没有绑定到vue的数据中 后来采取的做法是:查询my97的API,找到选择日期的…

最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue-pdf这个插件非常好用,并且还有许多方法.属性能进行功能扩展. 一.安装 npm install --save vue-pdf 二.基本示例 <template> <div class="pdf"> <pdf ref="pdf" :src="pdfUrl"> </pdf> </div> </template>…

1.vue中提供了install方法用来开发插件 官方:Vue.js 的插件应该有一个公开方法 install.这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象. 2.我的插件目录如下 button.vue用来书写插件的具体实现代码: button/index.js用来局部创建组件: library用来全局创建组件 3.button.vue文件 4.局部引入插件 import ButtonCom from "./button.vue"; //创建button这个插…

Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScroll(Dom对象, {//options startX: 0, startY: 0 }) Vue获得Dom对象方法, <div v-el:food-wrapper></div>//定义对象 this.$els.foodWrapper//获取对象 (Vue 更新数据时是异步的,所以在数据未…

何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素.通过该属性,可以使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: <style scoped> .examp…

vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clipboard'; 下面就是使用了,比如说,比较常见的是,上面一行文字,下面有一个复制的按钮, <p id="share-code">{{init.code}}</p> <button class="copy-btn" data-clipboa…

在vue中使用天气插件 插件网址:  中国天气 选择自己需要的插件.生成代码复制即可 在 vue 中的使用: template 中 <div id="weather-v2-plugin-simple"></div> mounted 中 window.WIDGET = {CONFIG:{"modules":"20","background":5,"tmpColor":"fff…

scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </style> 使用scoped划分本地样式的结果编译结果如下: h1[data-v-4c3b6c1c] { color: #f00; } 即在元素中添加了一个唯一属性用来区分. 缺点 一.如果用户在别处定义了相同的类名,也许还是会影响到组件的样式. 二.根据css样式优先级的特性,scoped这种处理会造成…

在前端开发中,经常会用到svg图标,在vue开发的中,经常会借助一些第三方插件,经常用的有vue-svg-icon,基本使用步骤为: 1.安装插件(会提示没有安装xml-loader,只需要安装下xml-loader,重启下项目就可以解决报错) npm install vue-svg-icon xml-loader -D 2.引入组件 import Icon from 'vue-svg-icon/Icon' Vue.component('Icon', Icon); 3.在项目src目录下创建sv…

什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. better-scroll 的滚动原理 不少同学可能用过 better-scroll,我收到反馈最多的问题是: 我的 better-scroll 初始化了, 但是没法滚动. 不能滚动是现象,我们得搞清楚这其中的根本原因.在这之前,我…