GP 前台 web 组件库

1.百度地图显示

yarn add gp-web-module
import { GpBaiduMap } from "gp-web-module";
import 'gp-web-module/dist/style.css';

<GpBaiduMap class="w-[360px]" :lng="lng" :lat="lat" :title="title" />

<h2>1.百度地图显示组件</h2>
<h3>a.单个标记点</h3>
<button class="bg-blue-200" @click="onChanageLngLat">修改经纬度</button>
<GpBaiduMap class="w-[360px]" :lng="lng" :lat="lat" :title="title" />

<h2 class="mt-8">b.多个标记点</h2>
<button class="bg-blue-200" @click="items = items2">修改经纬度</button>
<GpBaiduMap :zoom="13" class="w-[360px]" :items="items" />

<h2 class="mt-8">c.不显示未选中标记点文字，自定义 zoom</h2>
<button class="bg-blue-200" @click="onChangeCenter">切换中心点</button>
<GpBaiduMap :zoom="12" class="w-[360px]" :items="items" :no-select-show-text="false" />

SSR 项目中使用

注意配置 nuxt.config.ts

export default defineNuxtConfig({
  // ...
  build: {
    transpile: ["gp-web-module"],
  },
  vite: {
    optimizeDeps: {
      include: ["gp-web-module"],
    },
  },
  //...
});

发布 npm 包

npm run push

项目说明

Vue 3 + TypeScript + Vite + tailwindcss

初始化项目

npm init vite@latest gp-city-selector --template vue-ts

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Vue 3 + TypeScript + Vite

npm init vite@latest gp-web-module -- --template vue-ts cd my-vue3-lib npm install

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.

问题参考

• 打包 ts 类型问题：https://blog.csdn.net/Wrysmile0308/article/details/134318030