vue安装使用AMapUI

Vue.js是一个流行的前端框架，而AMapUI是阿里巴巴地图JavaScript API的封装，用于简化地图应用的开发。要在Vue项目中安装并使用AMapUI，你可以按照以下步骤操作：

1. **安装依赖**
使用npm或yarn添加AMapUI到你的项目中：
- npm命令:

     npm install amapui @vue/cli-plugin-amap --save

或者如果你使用的是Yarn:

     yarn add amapui @vue/cli-plugin-amap

2. **配置Vue CLI插件**
如果你使用的是Vue CLI，需要在`vue.config.js`文件中启用AMapUI插件，并设置API key：

   // vue.config.js
   module.exports = {
     plugins: [
       '@vue/cli-plugin-amap'
     ],
     amap: {
       ak: 'your_amap_api_key', // 替换为你从高德官网获取的实际API Key
     },
   };

3. **引入组件**
在你的Vue组件中导入AMapUI的组件，比如地图组件：

   <template>
     <div id="app">
       <amap-map :center="center" :zoom="zoom"></amap-map>
     </div>
   </template>

   <script>
   import AMapMap from "amapui/amap/map";
   
   export default {
     components: {
       AMapMap,
     },
     data() {
       return {
         center: [116.404, 39.915], // 北京坐标
         zoom: 13, // 显示比例尺
       };
     },
   };
   </script>

4. **注册全局组件**
可选步骤：如果你想在整个项目中都可以使用AMapUI组件，可以在main.js里注册它：

   import { createApp } from 'vue';
   import App from './App.vue';
   import { AMapMap } from "amapui";

   createApp(App)
     .component('AMapMap', AMapMap)
     .mount('#app');

现在你应该能够使用AMapUI组件在Vue项目中显示地图了。记得替换`ak`字段为你的实际API Key。