开源项目:使用 Atom-Electron 和 Vue.js 制作的简单 RSS 阅读器!!

简介: 开源项目:使用 Atom-Electron 和 Vue.js 制作的简单 RSS 阅读器!!

你们有没有这种经历?早上醒来,打开手机,刷着各种新闻、博客、资讯网站,然后在信息的海洋中迷失,忘记了自己其实只是想知道今天的天气?

我也有过这样的苦恼。信息爆炸的时代,我们需要一个聪明的小助手帮我们整理和过滤这些信息。

于是,我发现了一个神器——Raven Reader。这是一个使用 Atom-Electron 和 Vue.js 制作的简单 RSS 阅读器,帮你轻松管理和阅读各种资讯

今天,我将带你们一起搭建这个开源项目,让你的信息阅读变得高效又愉快。准备好了吗?让我们开始吧!

简介

Raven Reader 是一个开源的个人 RSS 阅读器,它使用 Atom-Electron 构建桌面应用,结合 Vue.js 实现前端展示。这个项目的目标是提供一个简洁、美观、易用的 RSS 阅读工具,帮助用户高效管理和阅读新闻、博客等资讯内容。

8e4e4b1cb1420b7c71cc39702a188b57.png

为什么选择 Raven Reader?

  • 跨平台支持:一次编写,随处运行。无论是 Windows、macOS 还是 Linux,都可以轻松部署。
  • 现代化技术栈:基于 Atom-Electron 和 Vue.js 构建,性能优越,扩展性强。
  • 丰富的功能:支持多种 RSS 源、实时更新、文章分类、标签管理等功能。
  • 社区支持:活跃的开源社区,持续更新和维护,遇到问题时可以轻松找到解决方案。

项目特点

1. 简洁易用的界面

Raven Reader 提供了一个简洁、直观的用户界面,用户可以轻松添加、管理和阅读 RSS 源。

2. 支持多种 RSS 源

用户可以添加多个 RSS 源,并在同一个界面中查看所有的最新资讯,支持导入和导出 OPML 文件。

3. 跨平台支持

Raven Reader 可以在 Windows、macOS 和 Linux 上运行,无需额外的配置。

4. 实时更新

应用会定期检查 RSS 源的更新,并在有新内容时提示用户,确保你不会错过任何重要资讯。

5. 离线阅读

支持将文章内容缓存到本地,方便用户在没有网络连接时进行阅读。

6. 标签和分类管理

用户可以为文章添加标签和分类,方便组织和查找内容。

如何使用

接下来,我们将详细介绍如何安装和配置 Raven Reader。

1. 环境准备

在开始安装之前,确保你的开发环境已经准备好:

  • Node.js 和 npm:用于安装和管理项目依赖
  • Git:用于克隆项目代码

2. 安装 Node.js 和 npm

你可以通过以下命令安装 Node.js 和 npm:

curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

3. 克隆项目代码

在你的工作目录下,运行以下命令克隆 Raven Reader 的代码:

git clone https://github.com/hello-efficiency-inc/raven-reader.git
cd raven-reader

4. 安装依赖

使用 npm 安装项目依赖:

npm install

5. 运行项目

使用以下命令启动开发服务器和 Electron 应用:

npm run dev

你现在可以在桌面上看到 Raven Reader 的应用界面了!

f0b23cdf6de7926ae061c3b4492dbe29.png

项目结构

项目的目录结构如下:

raven-reader/
├── build/
├── dist/
├── src/
│   ├── assets/
│   ├── components/
│   ├── main/
│   ├── renderer/
│   ├── store/
│   ├── App.vue
│   ├── main.js
│   ├── mainWindow.js
│   └── package.json
├── static/
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js

主要文件说明

  • src/main/:包含 Electron 主进程相关的代码。
  • src/renderer/:包含 Vue.js 渲染进程相关的代码。
  • src/store/:包含 Vuex 状态管理相关的代码。
  • src/components/:包含 Vue.js 组件。
  • src/main.js:Vue.js 入口文件,初始化 Vue 实例。
  • src/mainWindow.js:Electron 主窗口文件,定义了主窗口的创建和配置。
  • webpack.config.js:Webpack 配置文件,用于打包和构建项目。

代码示例

src/mainWindow.js(Electron 主窗口文件)

const { app, BrowserWindow } = require('electron');
const path = require('path');
function createMainWindow() {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  mainWindow.loadFile(path.join(__dirname, 'index.html'));
  mainWindow.on('closed', () => {
    app.quit();
  });
}
app.on('ready', createMainWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createMainWindow();
  }
});

src/main.js(Vue.js 入口文件)

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
createApp(App).use(store).mount('#app');

src/App.vue(主组件文件)

<template>
  <div id="app">
    <h1>Raven Reader</h1>
    <FeedList />
    <FeedContent />
  </div>
</template>
<script>
import FeedList from './components/FeedList.vue';
import FeedContent from './components/FeedContent.vue';
export default {
  components: {
    FeedList,
    FeedContent,
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/components/FeedList.vue

<template>
  <div class="feed-list">
    <h2>Feeds</h2>
    <ul>
      <li v-for="feed in feeds" :key="feed.id">
        {{ feed.title }}
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['feeds']),
  },
};
</script>
<style>
.feed-list {
  text-align: left;
  padding: 20px;
}
.feed-list ul {
  list-style-type: none;
  padding: 0;
}
.feed-list li {
  margin: 10px 0;
}
</style>

src/store/index.js

import { createStore } from 'vuex';
export default createStore({
  state: {
    feeds: [],
  },
  mutations: {
    setFeeds(state, feeds) {
      state.feeds = feeds;
    },
  },
  actions: {
    async fetchFeeds({ commit }) {
      const response = await fetch('https://api.rss2json.com/v1/api.json?rss_url=https://example.com/rss');
      const data = await response.json();
      commit('setFeeds', data.items);
    },
  },
  modules: {},
});

如何添加和管理 RSS 源

在 Raven Reader 中,你可以轻松地添加和管理 RSS 源。以下是详细步骤:

1. 添加 RSS 源

在应用界面中,点击 "Add Feed" 按钮,输入 RSS 源的 URL,然后点击 "Save"。应用会自动获取该源的最新内容并显示在列表中。

2. 管理 RSS 源

在 "Feeds" 列表中,你可以点击某个 RSS 源的标题,查看其所有文章。你还可以对文章进行分类、添加标签,方便日后查找。



目录
打赏
0
4
4
0
59
分享
相关文章
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
54 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
57 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
47 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
55 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
7天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
152 1
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
151 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等