Skip to content

开发指引 基本约定及参考

Jump to bottom
Rhilip edited this page Mar 18, 2025 · 2 revisions

目录结构及说明

此处目录结构基于 05b62c，后续部分目录有扩充，请对应理解

├─.github                      // 与 Github 有关的文件
├─.husky                       // 与 husky  有关的文件
├─.vscode                      // vscode编辑器设置推荐
├─dist                         // build产物目录，在源码中已ignore
├─public                       // 存放静态资源的目录
│  ├─icons
│  │  ├─downloader             // 下载器图标目录
│  │  ├─logo                   // 项目 logo 目录
│  │  └─site                   // 站点 favicon 目录
│  └─_locales                  // 对webextension使用的i18n文件目录（此目录根据 src\locales\*.json 的 $.manifest 字段自动构造），在源码中已ignore
├─src                          // 代码主目录
│  ├─entries                   // 插件相关background, offscreen, options页面实现的目录
│  │  ├─background
│  │  ├─offscreen
│  │  ├─options
│  │  │  ├─components           // 可以跨多个views通用的组件（组件名采用 PascalCase 命名格式）
│  │  │  ├─plugins
│  │  │  ├─stores
│  │  │  └─views                // options页面组件（组件名）
│  │  └─shared                  // 一些可以在插件不同页面中公用的方法
│  │      ├─adapters
│  │      └─storages
│  ├─extends                    // 对npm库进行增强的目录
│  ├─locales                    // i18n文件目录
│  └─packages                   // 拓展库目录
│      ├─backupServer           // 备份服务器实现目录
│      │  └─entity
│      ├─downloader             // 下载服务器实现目录
│      │  └─entity
│      └─site                   // 站点实现目录
│          ├─definitions        // 单个站点实现
│          ├─schemas            // 站点模板实现
│          ├─types              // typescript定义
│          └─utils              // 其他辅助函数
└─vite                          // 对 vite 进行拓展的目录

开发约定

  1. 对 Vue 的组件（既包括 components，也包括 views），均采用 PascalCase 命名格式
  2. 在绝大多数情况下 Vuetify 提供的css类已经能满足基本需求，如果你确实需要使用 tailwindcss 进行微调，请使用 prefix(tw)，如 tw:flex

参考文档

  1. 构造框架
类别 链接
Chrome Extension Manifest v3 https://developer.chrome.com/docs/extensions/reference
Vite https://vite.dev/guide/
vite-plugin-web-extension https://vite-plugin-web-extension.aklinker1.io/guide/
  1. Vue 相关
类别 链接
Vue https://cn.vuejs.org/index.html
Pinia https://pinia.vuejs.org/core-concepts/state.html
Vue-i18n https://vue-i18n.intlify.dev/
Vue Router https://router.vuejs.org/
VueUse https://vueuse.org/
  1. UI 相关
类别 链接
Vuetify https://vuetifyjs.com/en/
@mdi/font https://pictogrammers.com/library/mdi/
Tailwind CSS https://tailwindcss.com/
  1. 工具类
类别 链接
axios https://axios-http.com/docs/intro
date-fns https://date-fns.org/docs/Getting-Started
es-toolkit https://es-toolkit.slash.page/
Clone this wiki locally