Vue-第三方插件引用

1.npm引入jquery库>

npm i jquery --S //jquery要小写

然后在main.js中引用

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router' //路由引入
import axios from 'axios'
import $ from "jquery";  //引入全局jquery

接着在build中的webpack.base.conf.js的头部

添加 const webpack = require(“webpack”)

再在module.exports={ }里

添加如下代码

plugins: [

    new webpack.ProvidePlugin({

          $:"jquery",

          jQuery:"jquery",

 })
],

这样全局的jquery 就引入完毕了 是不是很simple！

-------end-------

2.引用第三方插件(以Headroom.js举个栗子)

可以在index.html中直接引用js插件，也同样可以用import引用

<script  type="text/javascript"  src="https://npmcdn.com/headroom.js@0.9.4/dist/headroom.js"></script>
//或者
import './相对路径'

Headroom.js可以为导航栏快速响应用户的页面滚动操作

详情可以参考官网

我做了一个简单的demo，如下代码
JS

	mounted: function() {
    var myElement = document.querySelector(".header");
    var headroom = new Headroom(myElement);
    headroom.init();
  }

CSS

.headroom {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.8s ease-in-out;
  z-index: 10;
}
.headroom--unpinned {
  top: -100px;
}
.headroom--pinned {
  top: 0;
}

HTML

<div id="search-box" class="header"></div>