BewlyBewly 项目安装和配置指南

BewlyBewly 项目安装和配置指南

BewlyBewly Improve your Bilibili homepage by redesigning it, adding more features, and personalizing it to match your preferences. (English | 简体中文 | 正體中文 | 廣東話) 项目地址: https://gitcode.com/gh_mirrors/bew/BewlyBewly

1. 项目基础介绍和主要编程语言

项目基础介绍

BewlyBewly 是一个浏览器扩展项目，旨在通过重新设计 Bilibili 的用户界面，添加更多功能，并根据用户偏好进行个性化设置，从而提升用户在 Bilibili 上的使用体验。该项目的设计灵感来源于 YouTube、Vision OS 和 iOS，目标是创建一个更加美观和用户友好的界面。

主要编程语言

该项目主要使用以下编程语言和框架：

• TypeScript: 用于编写扩展的核心逻辑。
• Vue.js: 用于构建用户界面。
• SCSS: 用于样式设计和美化。

2. 项目使用的关键技术和框架

关键技术和框架

• Vite: 用于构建和打包项目。
• Vitesse-webext: 作为项目的基础模板，提供了开发浏览器扩展所需的基本结构和工具。
• ESLint: 用于代码质量检查和格式化。
• pnpm: 作为包管理工具，用于管理项目依赖。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装之前，请确保您的开发环境已经安装了以下工具：

• Node.js: 建议使用最新稳定版本。
• pnpm: 可以通过 npm install -g pnpm 安装。
• Git: 用于克隆项目代码。

详细安装步骤

步骤 1: 克隆项目代码

首先，使用 Git 克隆项目代码到本地：

git clone https://github.com/BewlyBewly/BewlyBewly.git
cd BewlyBewly

步骤 2: 安装项目依赖

进入项目目录后，使用 pnpm 安装项目依赖：

pnpm install

步骤 3: 配置开发环境

在项目根目录下，您可以编辑 .env 文件来配置开发环境变量。如果没有该文件，可以创建一个并根据需要添加配置项。

步骤 4: 启动开发服务器

使用以下命令启动开发服务器：

pnpm run dev

这将启动一个本地开发服务器，您可以在浏览器中访问扩展的开发版本。

步骤 5: 构建项目

当您完成开发并准备发布时，可以使用以下命令构建项目：

pnpm run build

构建完成后，生成的文件将位于 dist 目录中，您可以将这些文件打包并上传到浏览器的扩展商店。

安装扩展

如果您希望在本地安装扩展进行测试，可以按照以下步骤操作：

对于 Chrome 浏览器

1. 打开 Chrome 浏览器，访问 chrome://extensions/。
2. 启用“开发者模式”。
3. 点击“加载已解压的扩展程序”，选择项目目录中的 dist 文件夹。

对于 Edge 浏览器

1. 打开 Edge 浏览器，访问 edge://extensions/。
2. 启用“开发者模式”。
3. 点击“加载已解压的扩展程序”，选择项目目录中的 dist 文件夹。

通过以上步骤，您应该能够成功安装并配置 BewlyBewly 项目，开始享受重新设计的 Bilibili 用户体验。

BewlyBewly Improve your Bilibili homepage by redesigning it, adding more features, and personalizing it to match your preferences. (English | 简体中文 | 正體中文 | 廣東話) 项目地址: https://gitcode.com/gh_mirrors/bew/BewlyBewly