在vue中使用各种插件、库如swiper,ElementUI....

1.引入element UI

   第一步：npm i element-ui -S
   第二步：在main.js中引入elementUI
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   Vue.use(ElementUI)
   第三步：可以在组件中使用了

2.引入bootstrap

第一步：安装jquery    npm install jquery --save-dev
第二步：在webpack.config.js 添加内容
const webpack = require("webpack");
module.exports = {
entry: './index.js',
output: {
    path: path.join(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'index.js'
},
plugins: [
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery'
    })
]
}
第三步：在入口文件main.js中添加内容
import $ from 'jquery' ;
安装好后测试一下是否安装成功
第四步：安装boostrap    npm install --save-dev bootstrap
第五步：在入口文件main.js里引入相关
import './node_modules/bootstrap/dist/css/bootstrap.min.css';
import './node_modules/bootstrap/dist/js/bootstrap.min.js';
bootstrap引入成功，可在页面进行测试

3.引入swiper(pc端)

1.npm命令安装swiper

 npm install swiper --save-dev

2.在需要用到swiper插件的组件中引入swiper

  import Swiper from "swiper"

3.在main.js中引入css文件

 import 'swiper/dist/css/swiper.min.css';

4.在需要播放的组件中的mounted里

var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});

4.引入swiper （移动端）vue-awesome-swiper

先下载

  npm install [email protected] --save

使用：
全局挂载：在main.js中引用

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */）

引入后便可以在组件中能使用了，使用方法见官网
https://github.surmon.me/vue-awesome-swiper/