Obsidian GPT3 Notes 项目启动与配置教程

1. 项目目录结构及介绍

Obsidian GPT3 Notes 项目的目录结构如下：

obsidian-gpt3-notes/
├── .gitignore           # Git 忽略文件
├── README.md            # 项目说明文件
├── package-lock.json    # 包依赖锁定文件
├── package.json         # 项目配置文件
├── scripts              # 脚本目录
│   ├── build.js         # 构建脚本
│   └── serve.js         # 服务脚本
├── src                  # 源代码目录
│   ├── components       # 组件目录
│   ├── index.js         # 项目入口文件
│   ├── styles           # 样式目录
│   └── utils            # 工具函数目录
└── vite.config.js       # Vite 配置文件

• .gitignore：指定 Git 应该忽略的文件和目录。
• README.md：项目说明文件，包含项目的介绍、安装、使用和配置信息。
• package-lock.json：锁定项目的依赖，确保在不同环境下的依赖一致。
• package.json：项目的配置文件，包含项目的基本信息和脚本命令。
• scripts：包含项目的构建和运行脚本。
• src：源代码目录，包含项目的所有代码。
  • components：存放所有自定义的 React 组件。
  • index.js：项目的入口文件，用于启动和挂载 React 应用。
  • styles：存放项目的样式文件。
  • utils：存放项目的工具函数。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，其主要内容如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

该文件做了以下几件事情：

• 引入 React 和 ReactDOM 库。
• 引入 App 组件，它是整个应用的主组件。
• 使用 ReactDOM 的 render 方法将 App 组件渲染到页面的根元素中。

3. 项目的配置文件介绍

项目的配置文件是 vite.config.js，它用于配置 Vite 开发服务器和构建过程。以下是配置文件的基本内容：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: process.env.NODE_ENV === 'production' ? '/obsidian-gpt3-notes/' : '/',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      // 配置 Rollup 打包行为
    }
  }
});

配置文件的主要功能如下：

• 使用 defineConfig 函数定义 Vite 配置。
• 引入 @vitejs/plugin-react 插件来支持 React。
• 设置 base 路径，用于指定构建的公共基础路径。
• 配置 build 选项，包括输出目录、资源目录以及 Rollup 打包的配置。