不使用npm/yarn时，如何使用Vue组件及npmjs上的vue-google-autocomplete组件？

嘿，我来帮你搞定这个问题！不用npm/yarn也完全能用上Vue组件，包括你提到的vue-google-autocomplete，咱们一步步来：

通用思路：不使用包管理器使用Vue组件 #

当没法用npm/yarn这类工具时，核心就是通过CDN直接引入编译好的组件脚本，基本步骤如下：

• 先引入Vue的CDN脚本（确保Vue全局可调用）
• 找到目标组件的UMD/IIFE格式编译文件（这类文件可直接通过<script>标签在浏览器中运行），同样用CDN引入
• 如果组件有依赖（比如这个谷歌自动补全组件依赖谷歌地图API），还要提前引入对应的依赖脚本
• 最后在HTML中使用组件，并初始化Vue实例

针对vue-google-autocomplete的具体操作 #

接下来咱们针对你要的这个组件一步步实现：

1. 引入必要的CDN脚本 #

你需要按顺序引入这三个脚本：

• Vue的CDN（比如用unpkg的稳定版）
• 谷歌地图Places API脚本（必须带你的Google API Key，需要去Google Cloud控制台申请并启用Places API）
• vue-google-autocomplete的UMD版本CDN

2. 编写HTML和Vue代码 #

把组件嵌入到你的Vue实例挂载的DOM元素中，然后初始化Vue并处理组件事件。

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Vue Google Autocomplete Without npm</title>
  <!-- 引入Vue -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入谷歌地图Places API，替换成你自己的API Key -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&libraries=places"></script>
  <!-- 引入vue-google-autocomplete的UMD版本 -->
  <script src="https://unpkg.com/vue-google-autocomplete@1/dist/vue-google-autocomplete.umd.js"></script>
</head>
<body>
  <div id="app">
    <h2>{{ message }}</h2>
    <!-- 使用vue-google-autocomplete组件 -->
    <vue-google-autocomplete
      id="autocomplete"
      placeholder="输入地址..."
      @placechanged="onPlaceChanged"
    ></vue-google-autocomplete>
    <div v-if="selectedPlace">
      <h3>选中的地址信息：</h3>
      <p>地址全称：{{ selectedPlace.formatted_address }}</p>
      <p>纬度：{{ selectedPlace.geometry.location.lat() }}</p>
      <p>经度：{{ selectedPlace.geometry.location.lng() }}</p>
    </div>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        selectedPlace: null
      },
      methods: {
        // 处理地址选择事件
        onPlaceChanged(place) {
          this.selectedPlace = place;
        }
      }
    })
  </script>
</body>
</html>

重要注意事项 #

• 一定要替换YOUR_GOOGLE_API_KEY为你自己的Google API Key，否则谷歌地图API无法正常工作
• 这个组件目前主要适配Vue2，如果使用Vue3，需要调整Vue的CDN链接，同时确认组件是否有Vue3适配版本
• 组件的自定义属性、事件可参考官方文档调整，比如限制搜索区域、自定义样式等

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