写在前面

日前，在进修运用Vue2.0开辟新的项目。但是现在用Vue完成的UI框架内里，还没有涌现具有像bootstrap一样统治力的框架。一番纠结后，老汉抄起家伙就是一梭…

那末题目来了，在
Vue中怎样引入
jQuery和
swiper呢？

阅历半天搜刮、比对、尝试以后，得出了下面的结论，单用 webpack 时设置同理。

引入jQuery

这个问度娘就有许多计划，我这里拔取的是将
jQuery暴露到全局的体式格局，如许就不必每一个用到的处所都要
import一次

装置 jQuery

npm i -S jQuery //等同于 npm install --save jQuery

设置 webpack.config.js

var webpack = require('webpack')
const ProvidePlugin = new webpack.ProvidePlugin({//引入外部类库
  $: 'jquery',
  jQuery: 'jquery',
});
module.exports = {
...
plugins: [
    ProvidePlugin,
  ],
...
}

至此，可全局运用熟习的$标记了。

更多要领

• 运用 exports-loader（根据官方例子实测，设置简朴成谜，但是无效，求指导）
• 设置 externals（概况参考引荐答案）
• 一般 import（也就是接下来要说的要领）

引入swiper插件

原本设置
externals后再在
index.html中援用的要领也是挺好的，但在我的项目中只要一个页面用到，而且
externals体式格局不知怎样设置
css（还望高人指导），故挑选一般
import的体式格局。

vue-awesome-swiper的运用能够参考 这篇文章

此法无需在index.html援用其JS或CSS，但每一个用到的页面都须要import一次，jQuery也可用此法引入。

简朴粗犷import

在
script 中
import 其
js文件

import Swiper from '../assets/lib/swiper-3.4.2.min.js'

在
style 中
@import 其
css文件

@import '../assets/lib/swiper-3.4.2.min.css';

至此，能够像平常一样运用又爱又恨的swiper了。

末了

这里只举了
jq和
swiper的例子，同理
其他插件也是可用一样的要领引入。虽以上皆经由实战磨练，但如有毛病迎接斧正。假如对你有协助，那就点个赞呗。逃。