【亲测免费】 Vue3-TS-Cesium-Map-Show 项目教程

2026-01-17 09:00:44作者：段琳惟

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

vue3-ts-cesium-map-show/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   ├── main.ts
│   └── ...
├── .browserslistrc
├── .env
├── .env.production
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .stylelintrc.js
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── tsconfig.json
└── vue.config.js

目录结构介绍

public/: 存放公共资源文件，如 index.html。
src/: 项目的主要源代码目录。
- assets/: 存放静态资源文件，如图片、字体等。
- components/: 存放 Vue 组件。
- router/: 存放 Vue Router 相关文件。
- store/: 存放 Vuex 相关文件。
- views/: 存放页面视图组件。
- App.vue: 项目的根组件。
- main.ts: 项目的入口文件。
.browserslistrc: 配置浏览器兼容性。
.env: 环境变量配置文件。
.env.production: 生产环境变量配置文件。
.eslintignore: ESLint 忽略文件配置。
.eslintrc.js: ESLint 配置文件。
.gitignore: Git 忽略文件配置。
.stylelintrc.js: Stylelint 配置文件。
LICENSE: 项目许可证文件。
README.md: 项目说明文档。
babel.config.js: Babel 配置文件。
package-lock.json: 锁定依赖包版本。
package.json: 项目依赖和脚本配置文件。
tsconfig.json: TypeScript 配置文件。
vue.config.js: Vue 项目配置文件。

2. 项目的启动文件介绍

main.ts

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

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

createApp(App)
  .use(router)
  .use(store)
  .mount('#app');

index.html

public/index.html 是项目的 HTML 模板文件，Vue 应用会挂载到 #app 元素上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3. 项目的配置文件介绍

vue.config.js

vue.config.js 是 Vue 项目的配置文件，可以进行一些项目构建和开发服务器的配置。

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'assets',
  lintOnSave: process.env.NODE_ENV !== 'production',
  devServer: {
    port: 8080,
    open: true,
  },
  css: {
    loaderOptions: