离线使用

安装：

cnpm i -S jquery

全局引入：

main.js中全局引入

import $ from 'jquery';
Vue.prototype.$ = $

使用：

直接this.$即可调用jQuery

  mounted() {
    this.$.get(
      'http://120.76.197.111:8090/geoserver/keshan/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=keshan%3Asichuan&maxFeatures=500&outputFormat=application%2Fjson',
      (data) => console.log('data:', data)
    );
  }

在线使用

直接在vue中引入jQuery的cdn在线链接很有可能会报错，这里通过间接的方式引入，即引入Layui，再使用Layui中自带的jQuery

public/index.html中引入layui.js和layui.css:

  <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
  <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

main.js中引入layui中的jQuery：

Vue.prototype.$ = layui.jquery

测试：

<template>
  <div class="main">
    <button class="layui-btn" @click="test()">测试</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.$(this.test);
  },
  computed: {},
  methods: {
    test() {
      layer.open({
        title: "hello",
        content: "大家好，这是LayUI弹窗",
      });
    },
  },
};
</script>