playground

description

一个 electron + vue3.0 + element plus 构建的桌面应用，灵感来源于WeChat

Project target

• 应用登录（使用网易云账号）
• 小说主页
• 小说大分类、小分类及列表加载
• 小说详细、热评、全部评论、推荐、搜索、目录、排行榜
• 小说阅读、黑夜模式、护眼模式
• 应用内webview、自定义导航栏
• 新闻阅读、无限加载
• 修改壁纸、注入webview背景
• 壁纸等高瀑布流（接口数据现在是统一宽高，无瀑布效果）
• 壁纸预览、下载本地
• 骨架屏 (歌单页, 发现页)
• 歌单分享
• 内置音乐
• 新闻搜索
• 应用消息通知
• 全局主题
• 应用本地状态持久化
• 用户设置页
• 小说书架
• 小说书签
• ...

src dir

to get dir tree npm run createDirTree

├── main-process
│   ├── index.ts
│   ├── ipcManager.ts
│   ├── lyricWindow.ts
│   └── mainWindow.ts
├── rendering-process
│   ├── api
│   │   ├── base
│   │   │   └── index.ts
│   │   ├── books
│   │   │   ├── cats.ts
│   │   │   ├── chapters.ts
│   │   │   ├── detail.ts
│   │   │   ├── index.ts
│   │   │   ├── ranking.ts
│   │   │   └── search.ts
│   │   ├── link
│   │   │   └── index.ts
│   │   ├── login
│   │   │   └── index.ts
│   │   ├── manager
│   │   │   └── index.ts
│   │   ├── mock
│   │   │   └── index.ts
│   │   ├── music
│   │   │   ├── find.ts
│   │   │   └── user.ts
│   │   ├── pictures
│   │   │   └── index.ts
│   │   └── street
│   │       └── index.ts
│   ├── app
│   │   ├── App.vue
│   │   └── provide.ts
│   ├── assets
│   │   ├── css
│   │   │   ├── color.less
│   │   │   ├── common.less
│   │   │   └── font.less
│   │   ├── font
│   │   │   └── iconfont.ttf
│   │   ├── img
│   │   │   ├── defaultMusic.jpg
│   │   │   ├── icon.png
│   │   │   ├── record.png
│   │   │   ├── record_dec.png
│   │   │   └── user_default.png
│   │   └── js
│   │       ├── Lyric.js
│   │       ├── nodeTree.js
│   │       └── utils.ts
│   ├── components
│   │   ├── Layout.vue
│   │   ├── Login.vue
│   │   ├── Search.vue
│   │   ├── SideBar.vue
│   │   └── TitleBar.vue
│   ├── main.ts
│   ├── pages
│   │   ├── books
│   │   │   ├── components
│   │   │   │   ├── bookshelf.vue
│   │   │   │   ├── booksList.vue
│   │   │   │   ├── classCard.vue
│   │   │   │   ├── commentsList.vue
│   │   │   │   ├── Hotwords.vue
│   │   │   │   └── navBar.vue
│   │   │   ├── main.vue
│   │   │   └── pages
│   │   │       ├── booksDetail.vue
│   │   │       ├── cats.vue
│   │   │       ├── catsDetail.vue
│   │   │       ├── chapters.vue
│   │   │       ├── comments.vue
│   │   │       ├── index.vue
│   │   │       ├── ranking.vue
│   │   │       ├── read.vue
│   │   │       ├── recommend.vue
│   │   │       └── search.vue
│   │   ├── link
│   │   │   └── main.vue
│   │   ├── music
│   │   │   ├── components
│   │   │   │   ├── Lyric.vue
│   │   │   │   ├── playBar.vue
│   │   │   │   ├── playBarController.vue
│   │   │   │   ├── playBarDes.vue
│   │   │   │   ├── playBarVolume.vue
│   │   │   │   ├── playList.vue
│   │   │   │   ├── playPanel.vue
│   │   │   │   ├── sideBar.vue
│   │   │   │   └── switch.vue
│   │   │   ├── main.vue
│   │   │   └── pages
│   │   │       ├── cloud
│   │   │       │   └── main.vue
│   │   │       ├── download
│   │   │       │   └── main.vue
│   │   │       ├── dynamic
│   │   │       │   └── main.vue
│   │   │       ├── find
│   │   │       │   ├── components
│   │   │       │   │   ├── home
│   │   │       │   │   │   ├── Banners.vue
│   │   │       │   │   │   ├── Dj.vue
│   │   │       │   │   │   ├── DragController.vue
│   │   │       │   │   │   ├── Mv.vue
│   │   │       │   │   │   ├── NewSong.vue
│   │   │       │   │   │   ├── PrivateContent.vue
│   │   │       │   │   │   ├── RecommendPlayList.vue
│   │   │       │   │   │   └── Skeleton.jsx
│   │   │       │   │   └── playList
│   │   │       │   ├── main.vue
│   │   │       │   └── pages
│   │   │       │       ├── home.vue
│   │   │       │       └── playList.vue
│   │   │       ├── fm
│   │   │       │   └── main.vue
│   │   │       ├── local
│   │   │       │   └── main.vue
│   │   │       ├── media
│   │   │       │   └── main.vue
│   │   │       ├── playlist
│   │   │       │   ├── components
│   │   │       │   │   ├── Collectors.vue
│   │   │       │   │   ├── Comments.vue
│   │   │       │   │   ├── List.vue
│   │   │       │   │   └── Skeleton.jsx
│   │   │       │   └── main.vue
│   │   │       └── star
│   │   │           └── main.vue
│   │   ├── pictures
│   │   │   ├── main.vue
│   │   │   └── preview.vue
│   │   ├── set
│   │   │   └── main.vue
│   │   └── street
│   │       ├── contentParser.ts
│   │       └── main.vue
│   ├── routers
│   │   └── index.ts
│   └── store
│       ├── index.ts
│       ├── modules
│       │   ├── book.ts
│       │   ├── config.ts
│       │   ├── music.ts
│       │   ├── pictures.ts
│       │   └── user.ts
│       └── plugins
│           └── synchronous.ts
└── types
    ├── book.d.ts
    ├── config.d.ts
    ├── mainWindow.d.ts
    ├── music.d.ts
    ├── news.d.ts
    ├── picture.d.ts
    ├── request.d.ts
    ├── shims-vue.d.ts
    └── user.d.ts

Project screenshots

关于应用打包

electron-builder的build配置位于vue.config.js下，请阅读文档并自行更改

根目录下执行 npm run electron:build，构建过程如果遇到构建依赖请求失败，可以直接到目标地址下载并且放到本地cache下（具体操作可以goole下）

一些已知问题

• window7操作系统下歌词窗口底色不透明
  • win7需要设置窗口主题透明

About debug

点击窗口右上角的小图标可以打开chrome devtools

渲染进程的debug可以借助vue-devtools，在主进程加入

const { app, session } = require('electron')
const path = require('path')

app.on('ready', async () => {
  await session.defaultSession.loadExtension(path.join(__dirname, 'vue-devtools'))
})

注意：Vue2 的devtools无法检测到Vue3，最新版的devtools可以到 https://github.com/vuejs/vue-devtools下载最新版的zip。
更新：[email protected]还没支持vuex

About pull requests

如果你对本项目感兴趣的话，或者想把单独的项目作为tab模块放进本项目，请将branch命名为：

• 添加tab下单独模块：feature-tabs-XXX
• 添加功能：feature-add-XXX
• bug fix：bug-fix-XXX
• hot fix：hot-fix-XXX
• 样式修正：feature-style-XXX
• 更新README：update-readme

Project setup

yarn install

Compiles and hot-reloads for development

 yarn electron:serve

如果启动项目报错：TypeError: Cannot read property 'parseComponent' of undefined。
请尝试删除yarn.lock和node_module，并重新yarn install。

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

Vue-cli Configuration Reference.

Plugin electron-builder

Vue3.0

electron-builder