在 vue 中使用 jquery ui 和时间选择器

Question

我正在尝试使用 jquery ui 设置 vue cli，但无法弄清楚如何使用 jquery ui 组件。我需要加载以下 js 文件

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js

和 css 文件

https://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css

使时间选择器工作。这是一个代码笔链接，我在其中测试了该功能。 https://codepen.io/cksachdev/pen/EJgGVR

关于我应该如何使用 vue-cli/webpack 配置加载这些的任何建议。

这是我迄今为止尝试过的：

 module: {
    loaders: [
      { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
      { test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader' },
    ],
  },
  plugins: [
    // eslint-disable-next-line no-undef
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery',
    }),
  ],
  resolve: {
    alias: {
      'jquery-ui': '../../../node_modules/jquery-ui/ui/widgets',
      'jquery-ui-css': '../../../node_modules/jquery-ui/../../themes/base',
    },
  },

Answer 1

---

---

编辑 2：我继续编写了一个演示项目，您可以镜像来完成此操作..

View the demo here

View the source code/repo here

同样，不确定您为什么要这样做，但 ^that^ 是（另一种）解决方案..

---

---

---

您可以将这些脚本和 css 文件添加到“index.html”文件（公共 -> index.html）中，并像这样使用它：

编辑 1： 非常重要的是要注意没有理由需要导入（相当大的）jQuery 甚至使用 jQuery。 Vue 生态系统有很多现有的选择来解决这样的问题。..

vue2-timepicker 和 Vuetify timepicker（Vuetify 更像是一个完整的预样式组件库）..

[CodePen mirror]

/* TIMEPICKER COMPONENT */
const VueTimepicker = {
  template: "#vue-timepicker",
  computed: {
    id() {
      // give the component a unique id/name
      return "time-picker-" + this._uid;
    }
  },
  mounted() {
    $("#" + this.id).timepicker({
      timeFormat: "HH:mm:ss:l"
    });
  }
};

/* VUE APP */
new Vue({
  el: "#app",
  components: {
    VueTimepicker,
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css" />

<!-- ******************** -->
<!-- VUE APP -->
<!-- ******************** -->
<div id="app">
  <div>
    <div>
      <span>Timepicker 1</span>
      <vue-timepicker/>
    </div>
    <div style="margin-top: 20px;">
      <span>Timepicker 2</span>
      <vue-timepicker/>
    </div>
  </div>
</div>

<!-- ******************** -->
<!-- TIMEPICKER COMPONENT -->
<!-- ******************** -->
<script type="text/x-template" id="vue-timepicker">
  <div>
    <input type="text" :name="id" :id="id" value=" ">
  </div>
</script>