在SuperMap Client项目中的配置

如果你动手能力实在不强，请直接查看参考文件包。

1. 新建vue3项目

> cd <your-new-project-path>
> npm create vue@latest
...
> npm install 
> npm run dev

2. 安装iClient依赖

参考iClient for Leaflet开发指南

TIP

上述文档链接中有许多错误，请谨慎辨别

step1

安装leaflet、@supermap/iclient-leaflet

> npm install @supermap/iclient-leaflet
> npm install leaflet

step2

在main.js中引入leaflet和iclient leaflet的样式文件

main.js

import 'leaflet/dist/leaflet.css';
import '@supermap/iclient-leaflet/dist/iclient-leaflet.css';

3.配置Tailwindcss & Element-plus

step1

Tailwindcss参考Install Tailwind CSS with Vite
Element-plus参考使用包管理器安装Element-plus

> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p
> npm install element-plus --save

step2

在tailwind.config.js中增加配置

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [ 
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

step3

在./src/style.css中增加配置,记得将这个css文件引入到main.js或 index.html中

style.css

import 'element-plus/dist/index.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

TIP

通常vscode都会对@tailwind这个指令标注警告，我们忽略它

step4

在你的App.vue中测试它们：

App.vue

<script setup >
import {ElButton} from 'element-plus'
</script>
<template>
<div class="shadow-lg bg-blue-100 rounded-3xl w-40 h-40 flex gap-3 flex-col items-center justify-center">
  <el-button type="primary">Element-plus</el-button>
  <div class="text-purple-600 font-bold">Tailwind CSS</div>
</div>
</template>
<style scoped>
</style>

它预期将渲染为:

Tailwind CSS

如果你发现它没有生效，请检查你是否在main.js或index.html中引入了style.css，然后重启项目：

> 按住Ctrl + C
> npm run dev

4.配置项目结构

./src

├─assets
│  ├─css
│  ├─font
│  └─styles
├─components
├─composables
│  ├─plugins
├─layouts
├─pages
├─router
├─stores
├─utils
└─views

参考文件包

点击直接下载参考文件包

此文件包已经配置好了以下目录，并且包含了后续将用到的几个地图示例

├─.vscode
├─node_modules
├─public
│  └─imgs
└─src
    ├─assets
    │  ├─css
    │  └─font
    ├─components
    ├─composables
    ├─pages
    ├─router
    ├─stores
    ├─utils
    └─views

使用方式：

解压，进入example目录 npm install npm run dev 浏览器输入http://localhost:5174