Halo 主题 Sakura 项目教程

1. 项目目录结构及介绍

halo-theme-sakura/
├── docs/
│   ├── README.md
│   └── ...
├── src/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   ├── styles/
│   └── ...
├── templates/
│   ├── index.html
│   └── ...
├── all-contributorsrc
├── editorconfig
├── gitignore
├── LICENSE
├── README.md
├── annotation-setting.yaml
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── prettier.config.js
├── screenshot.png
├── settings.yaml
├── theme.yaml
├── tsconfig.json
└── vite.config.ts

目录结构说明

• docs/: 存放项目文档，包括 README.md 等。
• src/: 项目源代码目录，包含前端资源、组件、布局、页面和样式等。
  • assets/: 存放静态资源，如图片、字体等。
  • components/: 存放 Vue 组件。
  • layouts/: 存放页面布局组件。
  • pages/: 存放页面组件。
  • styles/: 存放样式文件。
• templates/: 存放 HTML 模板文件。
• all-contributorsrc: 贡献者配置文件。
• editorconfig: 编辑器配置文件。
• gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• annotation-setting.yaml: 注释设置文件。
• package-lock.json: npm 依赖锁定文件。
• package.json: 项目依赖和脚本配置文件。
• pnpm-lock.yaml: pnpm 依赖锁定文件。
• postcss.config.js: PostCSS 配置文件。
• prettier.config.js: Prettier 配置文件。
• screenshot.png: 项目截图。
• settings.yaml: 项目设置文件。
• theme.yaml: 主题配置文件。
• tsconfig.json: TypeScript 配置文件。
• vite.config.ts: Vite 配置文件。

2. 项目的启动文件介绍

启动文件

• package.json: 该文件包含了项目的启动脚本。通常使用 npm 或 yarn 来启动项目。

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

启动命令

• 开发模式: npm run dev 或 yarn dev
• 构建模式: npm run build 或 yarn build
• 预览模式: npm run preview 或 yarn preview

3. 项目的配置文件介绍

配置文件

• vite.config.ts: Vite 项目的配置文件，用于配置开发服务器、构建选项等。

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
  },
});

配置说明

• plugins: 配置 Vite 插件，如 vue() 插件用于支持 Vue 3。
• server: 配置开发服务器，如端口号 port。
• build: 配置构建选项，如输出目录 outDir。

通过以上配置，可以灵活地调整项目的开发和构建行为。