随笔- 86 文章- 4 评论- 3 阅读- 61486

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

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

?
1
var webpack = require("webpack")

然后在module.exports里面添加

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

入口文件main.js
```
//引入jq库
// import $ from 'jquery'
// Vue.use($)
import 'jquery-ui-dist/jquery-ui'
import 'jquery-ui-dist/jquery-ui.css'
```
一定要引入css，不然没有办法使用
jq在这里可以不用引入了
不然会报错
因为在webpack已经设置过了