vue cli引用jquery（cli3.0版本前）

vue cli引用jquery

注：vue-cli3.0 没有了 webpack.config.js 配置文件，取而代之的是集合在 vue.config.js文件 内进行配置

1.安装jquery依赖

npm install jquery -S

2.在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')
const webpack = require('webpack')                  //添加这一行

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}


module.exports = {
  plugins: [                                                     //添加这一块代码
    new webpack.ProvidePlugin({                                  //添加这一块代码
      jQuery: "jquery",                                          //添加这一块代码
      $: "jquery"                                                //添加这一块代码
    })                                                           //添加这一块代码
  ],                                                             //添加这一块代码
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath
  },

3.在组件页面内引用

<template>
  <div id="apps">点击</div>
</template>

<script>
import $ from "jquery";                   //引用jquery
export default {
  name: "Index",
  components: {
    Header,
    Footer
  },
  data() {
    return {};
  },
  mounted() {                                                //jQuery事件写在mounted（）周期函数内才有效
    $("#apps").on("click", function() {
      console.log("引入成功");
    });
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

vue cli引用swiper

1.安装swiper 依赖

npm install swiper -S

2.在组件内

<template>
  <div id="Header">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="height:550px;margin-top:90px;">
          <img src="../../../static/lib/image/banner3.png" alt style="width:100%;height:100%;">
        </div>
        <div class="swiper-slide" style="height:550px;margin-top:90px;">
          <img src="../../../static/lib/image/banner4.png" alt style="width:100%;height:100%;">
        </div>
      </div>
      <!-- Add Arrows -->
      <div class="swiper-button-next left carousel-control"></div>              //按钮
      <div class="swiper-button-prev"></div>                                          //按钮
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";                                         //引入swiper.js
import 'swiper/dist/css/swiper.css'                                 //引入swiper.css
export default {
  name: "Header",
  data() {
    return {};
  },
  mounted() {                                                                  // 声明必须写在mounted（）周期函数内
    var swiper = new Swiper(".swiper-container", {
      loop: true,
      autoplay: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>             //添加swiper样式
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  height: 400px;
  margin: 40px auto;
  text-align: center;
  font-size: 18px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
  color: #fff;
  background: #ffb72b;
}
</style>

vue cli引用bootstrap

1.安装bootstrap 依赖

npm install bootstrap3 -S

2.然后在main.js文件中引入bootstrap

import Vue from 'vue'
import App from './App'
import router from './router'

import $ from 'jquery'
import "bootstrap3/dist/css/bootstrap.css"
import "bootstrap3/dist/js/bootstrap.js"