vue使用jquery和jqueryui

一、安装Jquery UI

安装依赖

npm install jquery --save
npm install jquery-ui-dist --save

注意安装的是 jquery-ui-dist 而非 jquery-ui

二、在组件里使用

import $ from 'jquery'
import 'jquery-ui-dist/jquery-ui'
import 'jquery-ui-dist/jquery-ui.min.css'

HelloWorld.vue 示例

<template>
  <div>
    <div id="resizable">
      <h3 class="ui-widget-header">放大/缩小</h3>
    </div>

    <p>日期：<input type="text" id="datepicker"></p>
  </div>
</template>

<script>
import $ from 'jquery'
import 'jquery-ui-dist/jquery-ui'
import 'jquery-ui-dist/jquery-ui.min.css'

export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  mounted: function () {
    $('#resizable').resizable({})
    $('#datepicker').datepicker()
  }
}
</script>

<style scoped>
  #resizable { width: 200px; height: 150px; padding: 5px; }
  #resizable h3 { text-align: center; margin: 0; }
</style>

　　

三、在项目中全局引入jquery和jqueryui

1. 修改webpack.base.conf.js文件，在上方添加

   var webpack = require("webpack")
   

2. 然后在module.exports里面添加

   //在这里插入代码片
   plugins: [
       new webpack.ProvidePlugin({
       jQuery: "jquery",
       jquery: "jquery",
       $: "jquery",
       "windows.jQuery":"jquery"
       })
       ],

3. 入口文件main.js

   //引入jq库
   // import $ from 'jquery'
   // Vue.use($)
   import 'jquery-ui-dist/jquery-ui'
   import 'jquery-ui-dist/jquery-ui.css'

   一定要引入css，不然没有办法使用
   jq在这里可以不用引入了
   不然会报错
   因为在webpack已经设置过了

-------------------------------------------------------------------------

参考文档：https://www.cnblogs.com/eoalfj/p/13712416.html 

参考文档：https://blog.csdn.net/weixin_37820964/article/details/102968566