Vue + Jquery UI，在 Vue 中使用 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>