13518219792
1：npm install jquery
我们拥有十载网页设计和网站建设经验，从网站策划到网站制作，我们的网页设计师为您提供的解决方案。为企业提供做网站、网站制作、微信开发、微信小程序、成都做手机网站、H5技术、等业务。无论您有什么样的网站设计或者设计方案要求，我们都将富于创造性的提供专业设计服务并满足您的需求。
2：在build文件夹下的webpack.base.conf.js进行配置
（1）const webpack = require("webpack")
（2）在module.exports里面加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery:"jquery",
$:"jquery"
})
],
如图
3：在需要用到jquery的页面引入
import $ from 'jquery';
第一步、在项目中npm安装JQ
npm install jquery --save
第二步、检查是否安装成功
在package.json中的dependencies查看是否含有jquery
第三步、配置JQ
在vue.config.js中顶部写入 const webpack = require('webpack')
写入后在configureWebpack中加入
第四步、重启项目，引入成功
1、vue-cli webpack全局引入jquery
(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。)
(2)在webpack.base.conf.js里加入
1
var webpack = require("webpack")
(3)在module.exports的最后加入
1234567
plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })]
(4) 在main.js 引入就ok了 (测试这一步不用也可以)
1
import $ from 'jquery'
(5)然后 npm run dev 就可以在页面中直接用$ 了.
一 .引入swiper(全局，局部)
方法一：全局引入，也是最暴力的，但是也是有好处坏处（同时加载，但是不能保证同时下载）
link href="" rel="stylesheet"script src=""/script12
组件中可以直接使用的swiper了
_initSwiper() { const container = this.$refs.swiper; const config = {
effect: 'coverflow',
slidesPerView: 'auto',
centeredSlides: true,
initialSlide: this.activeIndex,
loop: true,
autoplay: 1000,
speed: 1000,
coverflow: {
rotate: 0,
stretch: -30,
depth: 100,
modifier: 0.7,
slideShadows: false,
},
}; this.mySwiper = new Swiper(container, config);
}1234567891011121314151617181920
2.方法二：main.js 中
import '../node_modules/swiper/dist/css/swiper.min.css';import 'swiper';12
执行上面的_initSwiper()的方法 即可
3.方法三：局部的引入的，有时只想的单个组件中使用某一个的库，方法如下
section ref="swiper" class="swiper-container"
div class="swiper-wrapper"
div class="demo swiper-slide" v-for="item in colorList" :style="`backgroundColor:${item}`"/div
/div/sectionscript
let swiperAsync = import('swiper') //引入的swiper.js（node_modules）的方法
export default {
data(){ return {
colorList: ['red', 'yellow', 'gray', 'pink']
}
},
methods: {
async _initSwiper() { let Swiper = await swiperAsync; //异步加载的
const container = this.$refs.swiper; //ref='swiper'
const config = { //swiper的参数配置
effect: 'coverflow',
slidesPerView: 'auto',
centeredSlides: true,
initialSlide: this.activeIndex,
loop: true,
autoplay: 1000,
speed: 1000,
coverflow: {
rotate: 0,
stretch: -30,
depth: 100,
modifier: 0.7,
slideShadows: false,
},
}; this.mySwiper = new Swiper(container, config);
},
},
mounted(){ this._initSwiper();
}
}/scriptstyle lang="scss" scoped
/*@import '../assets/styles/swiper.min.css'; !*静态资源的文件*!*/
@import '../../node_modules/swiper/dist/css/swiper.min.css';/style12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
二 引入的jquery的方法
全局的方法
script src=""/script1
组件中可以直接使用的 ‘$’的方法
局部的方法：
npm install jquery -D1
需要使用的组件中引入
import $ from 'jquery'1
