xyzgis-switch-and-sync

# 创建项目
pnpm create vite xyzgis-switch-and-sync

# 进入项目
cd vite xyzgis-switch-and-sync

# 安装依赖
pnpm install

# 运行项目
npm run dev

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': resolve('./src'), // 配置相对路径别名，使用 @ 代替 src
        },
    },
})

pnpm i sass-loader sass --save-dev

// 公共变量
$vw: 19.2vw;

// 字体大小
$app-font-size: (20 / $vw);

// 主题色
$app-bg-color: #f5f5f5;
// 主题高亮色
$app-bg-height-color: #666666;
// 字体色
$app-font-color: #222222;
// 字体高亮色
$app-font-height-color: #ffff43;

import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    css: {
        preprocessorOptions: {
            scss: {
                javascriptEnabled: true,
                // 在组件中引入公共变量
                additionalData: '@import "@/assets/styles/variables.scss";',
            },
        },
    },
})

import { createApp } from 'vue'
// 引用公共样式
import './assets/styles/common.scss'
import App from './App.vue'

createApp(App).mount('#app')

// 样式重用
@import './variables'; // 引入公共变量

* {
    padding: 0;
    margin: 0;
}

html,
body,
#app {
    width: 100%;
    height: 100%;
}

body {
    font:
        $app-font-size 'Microsoft Yahei',
        'PingFang SC',
        'Avenir',
        'Segoe UI',
        'Hiragino Sans GB',
        'STHeiti',
        'Microsoft Sans Serif',
        'WenQuanYi Micro Hei',
        sans-serif;
}

// 去除边距
ul,
h1,
h3,
h4,
p,
dl,
dd {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: $app-font-color;
    outline: none;
}

i {
    font-style: normal;
}

// input的样式
input[type='text'],
input[type='search'],
input[type='password'],
input[type='checkbox'] {
    padding: 0;
    outline: none;
    border: none;
    -webkit-appearance: none;

    &::placeholder {
        color: $app-font-color;
    }
}

img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

ul {
    list-style: none;
}

pnpm install element-plus --save

# 按需导入插件
pnpm install -D unplugin-vue-components unplugin-auto-import

# icon图标
pnpm install @element-plus/icons-vue
pnpm i unplugin-icons -D

import { defineConfig } from 'vite'
// element-plus 按需导入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// element-plus icon 按需导入插件
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
    plugins: [
        vue(),
        // element-plus 按需导入插件
        AutoImport({
            resolvers: [
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({
                    prefix: 'Icon',
                }),
            ],
        }),
        Components({
            resolvers: [
                ElementPlusResolver(),
                // 自动注册图标组件
                IconsResolver({
                    enabledCollections: ['ep'],
                }),
            ],
        }),
        Icons({
            autoInstall: true,
        }),
    ],
})

pnpm install cesium --save

# Cesium插件
pnpm i vite-plugin-cesium vite -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

export default defineConfig({
    plugins: [vue(), cesium()],
})

pnpm install --save leaflet

# ts集成
pnpm install @types/leaflet --save-dev

pnpm install --save ol

pnpm install --save mapbox-gl

# ts集成依赖
pnpm install @types/mapbox-gl -D

module.exports = {
    extends: ['plugin:vue/vue3-recommended'],
}

module.exports = {
    extends: ['plugin:vue/vue3-recommended'],
}

{
    "extends": ["plugin:vue/vue3-recommended"]
}

'feat' // 新特性、新功能
'fix' // 修改bug
'docs' // 文档修改
'style' // 代码格式修改, 注意不是 css 修改
'refactor' // 代码重构
'perf' // 优化相关，比如提升性能、体验
'test' // 测试用例修改
'chore' // 其他修改, 比如改变构建流程、或者增加依赖库、工具等
'revert' // 回滚到上一个版本
'build' // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动