BewlyBewly 项目使用教程

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

BewlyBewly 项目的目录结构如下：

BewlyBewly/
├── README.md
├── package.json
├── pnpm-lock.yaml
├── shim.d.ts
├── tsconfig.json
├── tsup.config.ts
├── unocss.config.ts
├── vite-mv3-hmr.ts
├── vite.config.ts
├── vite.config.content.ts
├── src/
│   ├── main.ts
│   ├── assets/
│   ├── components/
│   ├── styles/
│   └── ...
└── ...

目录结构介绍

• README.md: 项目介绍文件。
• package.json: 项目依赖和脚本配置文件。
• pnpm-lock.yaml: 锁定依赖版本的文件。
• shim.d.ts: TypeScript 类型声明文件。
• tsconfig.json: TypeScript 配置文件。
• tsup.config.ts: tsup 构建工具配置文件。
• unocss.config.ts: UnoCSS 配置文件。
• vite-mv3-hmr.ts: Vite 热模块替换配置文件。
• vite.config.ts: Vite 主配置文件。
• vite.config.content.ts: Vite 内容配置文件。
• src/: 源代码目录。
  • main.ts: 项目入口文件。
  • assets/: 静态资源文件夹。
  • components/: 组件文件夹。
  • styles/: 样式文件夹。

2. 项目的启动文件介绍

项目的启动文件是 src/main.ts。这个文件是整个项目的入口点，负责初始化应用和启动服务。

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

启动文件介绍

• createApp: 创建 Vue 应用实例的函数。
• App: 主应用组件。
• app.mount('#app'): 将应用挂载到 DOM 中的 #app 元素上。

3. 项目的配置文件介绍

项目的配置文件主要包括 tsconfig.json、vite.config.ts 和 unocss.config.ts。

tsconfig.json

TypeScript 配置文件，定义了 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src"]
}

vite.config.ts

Vite 配置文件，定义了 Vite 构建和开发服务器的选项。

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

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

unocss.config.ts

UnoCSS 配置文件，定义了 UnoCSS 的预设和规则。

import { defineConfig } from 'unocss';
import presetUno from '@unocss/preset-uno';

export default defineConfig({
  presets: [presetUno()],
  rules: [
    // 自定义规则
  ]
});

以上是 BewlyBewly 项目的基本使用教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望这些信息能帮助你更好地理解和使用该项目。