Vue Cli集成jQuery UI及时间选择器配置方案求助

我来帮你搞定这个配置问题，按照下面的步骤操作，应该就能让时间选择器正常工作啦：

第一步：安装核心依赖 #

先通过npm安装基础的依赖包，这样Webpack能更好地管理它们：

npm install jquery jquery-ui --save

至于jquery-ui-timepicker-addon，如果没有对应的npm包，你可以选择把它的JS/CSS文件下载到项目的public目录，或者直接在页面里引入CDN资源（后面会说具体方式）。

第二步：配置Vue CLI的Webpack设置 #

在项目根目录创建或修改vue.config.js文件，替换成下面的配置，它会帮你全局注入jQuery，同时配置好jQuery UI的路径别名：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      // 全局注入jQuery，让组件里不用每次都import
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery'
      })
    ],
    resolve: {
      alias: {
        // 配置jQuery UI组件的别名，方便引入
        'jquery-ui': 'jquery-ui/ui/widgets',
        // 配置jQuery UI样式的别名
        'jquery-ui-css': 'jquery-ui/themes/smoothness'
      }
    }
  }
}

第三步：引入时间选择器的额外资源 #

你需要的jquery-ui-timepicker-addon和对应的样式，有两种引入方式：

方式1：通过CDN直接引入（最简单） #

打开项目根目录的public/index.html，在<head>里加CSS，在</body>前加JS：

<!-- 头部加样式 -->
<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">

<!-- 底部加JS -->
<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>

方式2：本地文件引入 #

把对应的JS/CSS文件下载到项目的public/js和public/css目录，然后在index.html里用相对路径引入，或者在组件里import。

第四步：在Vue组件中使用时间选择器 #

比如在你的某个组件（比如TimePickerDemo.vue）里，这样初始化：

<template>
  <div>
    <input type="text" id="my-timepicker">
  </div>
</template>

<script>
// 如果是本地引入的timepicker，需要在这里import；CDN引入的话可以跳过这两行
// import '../public/js/jquery-ui-timepicker-addon.min.js'
// import '../public/js/jquery-ui-sliderAccess.js'

// 引入jQuery UI的基础样式和timepicker样式（CDN引入的话也可以跳过）
// import 'jquery-ui-css/jquery-ui.css'
// import '../public/css/jquery-ui-timepicker-addon.min.css'

export default {
  mounted() {
    // 页面渲染完成后初始化时间选择器
    $('#my-timepicker').timepicker({
      // 这里可以加你的自定义配置，比如时间格式、间隔等
      timeFormat: 'HH:mm',
      interval: 15,
      minTime: '9:00am',
      maxTime: '6:00pm'
    })
  }
}
</script>

关键注意事项 #

• 加载顺序很重要：必须先加载jQuery，再加载jQuery UI，最后加载timepicker插件，否则会出现$ is undefined或者方法找不到的错误。
• 样式别漏加：如果没有引入对应的CSS，时间选择器会显示错乱，一定要确保所有样式文件都正确加载。

内容的提问来源于stack exchange，提问作者Chetan Sachdev