189 8069 5689
一 .引入swiper(全局，局部)
成都创新互联公司专注于企业营销型网站建设、网站重做改版、乐安网站定制设计、自适应品牌网站建设、H5开发、商城建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为乐安等各大城市提供网站开发制作服务。
方法一：全局引入，也是最暴力的，但是也是有好处坏处（同时加载，但是不能保证同时下载）
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
最近学习vue，习惯性的通过script标签引入jquery，写完后报错才想起来，这种方式在vue是不适用的。
1：因为已经安装了vue脚手架，所以需要在webpack中全局引入jquery
打开package.json文件，在里面加入这行代码，jquery后面的是版本，根据你自己需求更改。
dependencies:{
"jquery":"^2.2.3"
}
然后在命令行中cnpm install
大多人应该都是使用的淘宝镜像，所以使用cnpm，如果你不是 ，可以使用npm安装。
2：在webpack.base.conf.js中加入一行代码
var webpack=require("webpack")
3：在webpack.base.conf.js中module.exports的最后加入这行代码，
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
4：在main.js中引入,加入下面这行代码
import $ from 'jquery'
5：最后一步，重新跑一边就好，cnpm run dev
在Vue.js中使用jquery插件需要利用ProvidePlugin导入jquery全局库。1、在build/webpack.dev.conf.js和build/webpack.prod.conf.js中配置即可。2、在模块中使用的时候代码如下：plugins:[//这里是需要导入的插件列表，定意思jquery为全局参数newwebpack.ProvidePlugin({$:'jquery',jquery:'jquery','window.jQuery':'jquery',jQuery:'jquery'})]也可以使用import的这种写法：importjQueryfrom'jQuery'ready:function(){varself=this;jQuery(window).resize(function(){self.$refs.thisherechart.drawChart();})},
安装 jQuery 和 cropper.js
# install jQuery cropper
$ npm install jquery cropper --save
为jquery和Vue自定义指令配置webpack
为webpack配置添加jquery和Vue自定义指令的映射。
通常webpack已经引入了完整的jquery版本，但还是建议再一次引入一下。
您可以看到Vue的webpack模板已经添加到组件的文件夹中。我通常会添加很多其他文件夹像自定义指令，mixin等等。在这个例子中，我们只添加了自定义指令。
这将帮助我们引入依赖关系而无需知道其确切的路径。这也是有益的在你重构你的应用的时候。你也并不需要管理相对路径。
把下面高亮部分添加到build/webpack.base.conf文件中。
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery'),
'directives': path.resolve(__dirname, '../src/directives')
}
},
第一步、在项目中npm安装JQ
npm install jquery --save
第二步、检查是否安装成功
在package.json中的dependencies查看是否含有jquery
第三步、配置JQ
在vue.config.js中顶部写入 const webpack = require('webpack')
写入后在configureWebpack中加入
第四步、重启项目，引入成功