Rclone UI 项目启动与配置教程

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

Rclone UI 是一个用于管理和同步 Rclone 存储服务的图形用户界面。以下是项目的目录结构及其简要介绍：

rclone-ui/
├── .gitignore        # 用于 Git 的忽略文件
├── dist/             # 构建后的静态文件目录
├── Dockerfile        # 用于构建 Docker 容器的文件
├── package.json      # Node.js 项目配置文件
├── package-lock.json # Node.js 项目依赖锁定文件
├── public/           # 公共静态文件目录，如图片、样式表等
│   └── index.html    # 项目入口HTML文件
├── rclone-ui/        # 源代码目录
│   ├── src/          # 源代码
│   │   ├── assets/   # 资源文件目录
│   │   ├── components # 组件目录
│   │   ├── pages/    # 页面目录
│   │   ├── store/    # 状态管理目录
│   │   └── utils/    # 工具函数目录
│   └── App.vue       # 主组件
└── yarn.lock         # Yarn 依赖锁定文件

2. 项目的启动文件介绍

项目的启动文件位于 rclone-ui/src/main.js。以下是主要功能：

• 引入 Vue 框架和 App.vue 组件。
• 创建 Vue 实例并挂载到 DOM 上。
• 配置 Vue 路由和状态管理。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. 项目的配置文件介绍

项目的配置文件位于 rclone-ui/src/config.js。以下是主要配置：

• 配置 Rclone UI 与 Rclone 服务器的通信参数，例如 API 地址和端口。
• 配置前端页面的一些基本参数，如标题、主题颜色等。

const config = {
  rclone: {
    host: 'http://localhost:5572', // Rclone 服务器地址
    port: 5572 // Rclone 服务器端口
  },
  frontend: {
    title: 'Rclone UI', // 页面标题
    themeColor: '#1976D2' // 主题颜色
  }
}

export default config

在配置 Rclone UI 时，请确保 Rclone 服务器的地址和端口与配置文件中的对应参数一致，以确保正确通信。