Vue-TMap 项目教程

1. 项目的目录结构及介绍

Vue-TMap 项目的目录结构如下：

vue-tmap/
├── docs/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── plugins/
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
├── tests/
│   └── unit/
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── babel.config.js
├── buildconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
├── README_zh_CN.md
├── tsconfig.json
└── vite.config.js

目录结构介绍

• docs/: 存放项目文档。
• public/: 存放公共资源文件。
• src/: 源代码目录。
  • assets/: 存放静态资源文件。
  • components/: 存放 Vue 组件。
  • plugins/: 存放插件文件。
  • App.vue: 主应用组件。
  • main.ts: 项目入口文件。
  • shims-vue.d.ts: Vue 类型声明文件。
• tests/: 存放测试文件。
  • unit/: 单元测试文件。
• .browserslistrc: 配置浏览器兼容性。
• .editorconfig: 编辑器配置文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 配置文件。
• babel.config.js: Babel 配置文件。
• buildconfig.json: 构建配置文件。
• LICENSE: 项目许可证。
• package-lock.json: 锁定依赖版本。
• package.json: 项目依赖和脚本配置。
• README.md: 项目介绍文档。
• README_zh_CN.md: 中文项目介绍文档。
• tsconfig.json: TypeScript 配置文件。
• vite.config.js: Vite 配置文件。

2. 项目的启动文件介绍

入口文件

• main.ts: 项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 上。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

主应用组件

• App.vue: 主应用组件，包含整个应用的布局和结构。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

3. 项目的配置文件介绍

依赖管理

• package.json: 项目依赖和脚本配置。

{
  "name": "vue-tmap",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0",
    "typescript": "^4.0.0",
    "vite": "^2.0.0"
  }
}

构建配置

• vite.config.js: Vite 配置文件，用于配置开发服务器、构建选项等。

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

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  }
});

TypeScript 配置

• **tsconfig