Vue3-TS-Cesium-Map-Show 项目教程
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: