init project

.eslintrc.json

+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "parser": "@typescript-eslint/parser",
+    "sourceType": "module"
+  },
+  "plugins": ["vue", "@typescript-eslint"],
+  "rules": {
+    "vue/no-multiple-template-root": "off",
+    "vue/max-attributes-per-line": "off",
+    "vue/html-self-closing": "off",
+    "vue/script-setup-uses-vars": "off",
+    "vue/singleline-html-element-content-newline": "off",
+    "no-shadow-restricted-names": 2, // 禁用关键字及保留字等
+    "dot-notation": 1, // 尽可能使用 . 来访问对象属性
+    "no-multi-spaces": 1, // 禁止使用多个空格
+    "brace-style": 1, // 大括号风格 - one true brace style
+    "no-var": 1, // 禁用var声明
+    "no-new-object": 1, // 禁止new Object
+    "no-array-constructor": 1, // 禁止new Array
+    "prefer-const": 1, // 要求使用 const 声明那些声明后不再被修改的变量
+    "prefer-destructuring": 1, // 优先使用数组和对象解构
+    "no-param-reassign": 1, // 禁止在函数中对函数参数重新赋值
+    "no-extra-semi": 1, // 禁用不必要的分号
+    // "no-unused-vars": 1, // 禁止已声明但未使用的变量
+    // "indent": [1, 2], // 使用2个空格缩进
+    "no-multiple-empty-lines": [1, { "max": 1 }], // 禁止连续出现2个及以上空行
+    "default-case": 1, // 要求switch语句必须有default分支
+    "key-spacing": [1, { "beforeColon": false, "afterColon": true }], // 冒号前不要空格，后需要空格
+    "comma-spacing": [1, { "before": false, "after": true }], // 逗号前不要空格，后需要空格
+    "arrow-spacing": [1, { "before": true, "after": true }], // 箭头函数中的箭头前后需要留空格
+    "quotes": [1, "single"], // 字符串使用单引号
+    "semi": [1, "never"] // 禁止使用分号
+  }
+}

.gitignore

+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

.prettierrc.json

+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "all"
+}
\ No newline at end of file

.vscode/settings.json

+{
+  "editor.tabSize": 2,
+  "prettier.printWidth": 200,
+  "prettier.singleQuote": true,
+  "prettier.semi": false,
+  // vetur设置
+  "vetur.format.defaultFormatter.ts": "prettier",
+  "vetur.format.defaultFormatter.js": "prettier",
+  "vetur.format.defaultFormatter.less": "prettier",
+  "vetur.experimental.templateInterpolationService": true,
+  "vetur.validation.interpolation": false,
+  "vetur.validation.templateProps": true,
+  "vetur.format.defaultFormatterOptions": {
+    "prettyhtml": {
+      "printWidth": 100,
+      "singleQuote": false,
+      "wrapAttributes": false,
+      "sortAttributes": false
+    },
+  },
+  "eslint.options": {
+    "extensions": [
+        ".js",
+        ".vue",
+        ".ts",
+        ".tsx"
+    ]
+  },
+  "editor.formatOnSave": true
+}
\ No newline at end of file

LICENSE

+MIT License
+
+Copyright (c) 2021 Max Kwok
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

+# my-map
+
+多方地图统一调用
+
+---
+
+## Vue 3 + Typescript + Vite
+
+This template should help get you started developing with Vue 3 and Typescript in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
+
+### If Using `<script setup>`
+
+[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:
+
+### If Using Volar
+
+Run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+### If Using Vetur
+
+1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
+2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
+3. Open `src/main.ts` in VSCode
+4. Open the VSCode command palette
+5. Search and run "Select TypeScript version" -> "Use workspace version"

index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MyMap</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
\ No newline at end of file

package.json

+{
+  "name": "my-map",
+  "version": "0.0.0",
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.0.5"
+  },
+  "devDependencies": {
+    "@types/node": "^16.4.10",
+    "@typescript-eslint/eslint-plugin": "^4.28.1",
+    "@typescript-eslint/parser": "^4.28.5",
+    "@vitejs/plugin-vue": "^1.3.0",
+    "@vue/compiler-sfc": "^3.0.5",
+    "eslint": "^7.30.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-vue": "^7.14.0",
+    "prettier": "^2.3.2",
+    "typescript": "^4.3.2",
+    "vite": "^2.4.4",
+    "vue-eslint-parser": "^7.10.0",
+    "vue-tsc": "^0.2.2"
+  }
+}

src/App.vue

+<template>
+  <Main />
+</template>
+
+<script lang="ts" setup>
+import Main from '@/components/main.vue'
+</script>
+
+<style>
+html,
+body {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+#app {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+</style>

src/components/main.vue

+<template>
+  <div>My Map</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped></style>

src/main.ts

+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/shims-vue.d.ts

+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module '*.css'
+declare module '*.styl'
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.jpeg'
+declare module '*.gif'

src/vite-env.d.ts

+/// <reference types="vite/client" />

tsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist", "public"]
+}

vite.config.ts

+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+})