开源项目启动与配置教程

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

本项目为 sooahkimsfolio，一个基于前端技术的个人作品集网站。以下是项目的目录结构及其简要介绍：

• blender files/：存放与Blender相关的文件，可能用于生成网站中的一些3D效果或模型。
• public/：存放静态文件，如图片、字体等。
• src/：源代码目录，包含所有前端代码。
  • assets/：存放静态资源，如图标、图片等。
  • components/：可复用的Vue组件。
  • views/：页面文件。
  • router/：Vue Router路由配置文件。
  • store/：Vuex状态管理。
  • styles/：样式文件。
  • utils/：工具函数。
  • App.vue：主组件，是网站的壳。
  • main.js：项目的入口文件。
• .gitignore：定义哪些文件和目录应该被Git忽略。
• LICENSE.md：项目遵循的MIT许可证。
• README.md：项目说明文件。
• index.html：网站的入口HTML文件。
• package-lock.json：npm依赖锁文件，确保在不同环境中安装相同的依赖版本。
• package.json：项目配置文件，定义项目的依赖和脚本。
• vite.config.js：Vite配置文件，用于配置项目的构建和开发服务器。

2. 项目的启动文件介绍

项目的启动主要通过 package.json 文件中定义的脚本实现。以下是一些重要的启动脚本：

• npm install：安装项目依赖。
• npm run dev：启动开发服务器，通常用于本地开发。

启动开发服务器的具体操作如下：

1. 在项目根目录下打开命令行。
2. 执行 npm run dev 命令。

执行后，Vite开发服务器将启动，并且通常会自动在默认的网络浏览器中打开一个新标签页，地址通常是 http://localhost:3000。

3. 项目的配置文件介绍

项目的主要配置文件是 package.json 和 vite.config.js。

• package.json：此文件定义了项目的名称、版本、描述、关键词、作者、许可证、依赖项以及脚本。以下是一个简化的例子：

{
  "name": "sooahkimsfolio",
  "version": "1.0.0",
  "description": "A super duper duper cute room portfolio",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.0"
  }
}

• vite.config.js：Vite的配置文件，用于自定义Vite的行为，如设置开发服务器端口、配置代理、定义环境变量等。以下是一个基本的配置文件示例：

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [],
  server: {
    port: 3000,
    proxy: {
      // 代理配置
    }
  }
});

这些配置文件是项目正常运行的关键，确保了项目的依赖、环境和构建过程的一致性和可重复性。