vite-vue3-ts 项目快速入门指南

vite-vue3-ts 项目快速入门指南

vite-vue3-tsvite、vue3、script setup、TypeScript、pinia、ant-design-vue项目地址:https://gitcode.com/gh_mirrors/vi/vite-vue3-ts

一、项目目录结构及介绍

本项目基于 Vite、Vue3 和 TypeScript 构建，其目录结构精心设计以优化开发体验和维护性。以下是主要目录及其功能概述：

vite-vue3-ts/
│  
├── node_modules/         - 项目依赖包存放目录
├── public/               - 静态资源文件夹，如 favicon.ico 或者不经过Vite处理的静态资源
├── src/                  - 核心源代码目录
│   ├── assets/           - 项目中的图片、图标等静态资源
│   ├── components/       - 公共组件存放处
│   ├── views/            - 视图或页面组件
│   ├── App.vue           - 主入口视图文件
│   ├── main.ts           - 应用程序的主入口文件
│   ├── router/index.ts   - Vue Router 路由配置
│   ├── store/index.ts    - Vuex 状态管理（如果项目中使用）
│   └── globalStyle.css   - 全局样式文件
├── .env.[mode]           - 环境变量配置文件，用于不同环境的配置切换
├── package.json          - 包含项目元数据和脚本命令
├── README.md             - 项目说明文档
├── tsconfig.json         - TypeScript 编译器配置文件
└── vite.config.js        - Vite构建配置文件

二、项目的启动文件介绍

• main.ts：这是项目的入口点，负责初始化Vue应用实例，挂载根组件，并且可以在这里进行全局配置，例如Vue插件的注册、路由的引入、状态管理的初始化等。

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

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

三、项目的配置文件介绍

vite.config.js

Vite 的配置文件，定义了项目的构建和开发服务器设置。以下是一些常见配置项示例：

export default defineConfig({
  base: '/', // 应用的基础路径
  plugins: [vue()], // 自动加载Vue插件
  server: {
    port: 3000, // 开发服务端口
    open: true, // 浏览器自动打开
  },
  build: {
    target: 'esnext', // 指定编译目标
    outDir: 'dist', // 构建输出目录
  },
  resolve: {
    alias: { // 路径别名配置
      '@': fileURLToPath(resolve(__dirname, 'src')),
    },
  },
});

tsconfig.json

TypeScript配置文件，指导TS如何编译项目源码。关键配置包括指定编译目标、模块系统等。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "lib": ["ESNext", "DOM"],
    "types": ["vue"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

通过以上介绍，开发者可以快速了解项目的基本结构和配置，从而更高效地进行开发工作。

vite-vue3-tsvite、vue3、script setup、TypeScript、pinia、ant-design-vue项目地址:https://gitcode.com/gh_mirrors/vi/vite-vue3-ts