Vue3-Admin-TS 使用教程

1. 项目目录结构及介绍

Vue3-Admin-TS 的目录结构如下，每个部分都有其特定的用途：

.
├── public               # 静态资源文件夹，如favicon和index.html
│   ├── favicon.ico      # 网站图标
│   └── index.html       # 主页面模板
├── src                  # 源码文件夹
│   ├── assets            # 图片和其他静态资源
│   ├── components        # 共享组件
│   ├── layouts           # 应用布局
│   ├── views             # 业务视图组件
│   ├── plugins           # 第三方插件配置
│   ├── services          # 后台服务调用
│   ├── store             # Vuex状态管理
│   ├── router             # 路由配置
│   ├── shims-vue.d.ts     # Vue类型定义
│   ├── main.ts            # 应用入口文件
│   ├── App.vue           # 应用主组件
│   └── ...                # 其他源码文件
├── .babelrc.js          # Babel配置
├── .env.development     # 开发环境变量配置
├── .env.production      # 生产环境变量配置
├── jest.config.js       # Jest测试配置
├── package.json         # 项目依赖和脚本
└── vite.config.js        # Vite构建配置

2. 项目的启动文件介绍

• src/main.ts: 应用的入口文件，负责初始化Vue实例、引入Vue全家桶、设置全局变量和服务。在这个文件中，你可以看到Vue、Vuex、Vue Router的初始化，并注册全局组件。

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

const app = createApp(App)

// 初始化Vue应用
app.use(router).use(store).mount('#app')

• .env.*: 根据不同的环境（development或production），这些文件用于设置环境变量，例如API端点或服务端口。

3. 项目的配置文件介绍

• vite.config.js: Vite的构建配置文件，用于自定义开发和生产构建过程，包括修改端口、公共路径、CSS预处理器和转译配置等。

export default {
  base: './',
  server: {
    port: 8080,
  },
  build: {
    outDir: 'dist',
    assetsDir: 'static',
    rollupOptions: {...}, // Rollup配置项
  },
  css: {
    preprocessorOptions: {
      less: {...} // 若使用less，配置less选项
    }
  },
}

• .babelrc.js: Babel的配置文件，用于指定如何将ES6+代码转换为浏览器可理解的语法，通常在此处配置插件和presets。

• .env.development 和 .env.production: 如前所述，这些文件分别用于开发和生产环境，可以通过process.env在代码中访问设置的环境变量。

• jest.config.js: Jest测试框架的配置文件，定义测试匹配规则、全局配置以及覆盖率报告等。

这些配置文件是项目的核心组成部分，根据实际需求进行调整可以定制项目的工作流和产出物。更多详细信息，建议参考官方文档或项目内的README。