electron仿百度网盘-起手

最新推荐文章于 2021-09-09 20:34:15 发布

转载最新推荐文章于 2021-09-09 20:34:15 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c167c2ff265da6167203868

文章标签：

#javascript #开发工具 #python #ViewUI

本文分享了使用Electron和Vue.js开发桌面应用程序的实践经验，通过一个简单demo展示了环境搭建过程及默认路由配置，适合初学者入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

现在移动时代中虽然移动设备承载了大部分流量，但是PC端依旧还是不能放弃的重要平台。这几天学习了下electron，结合之前开发桌面应用的经验，写了一个极其简单的 demo。

源代码路径

https://github.com/sparkxxxxxx/electron-vue-pan

环境搭建

vue-cli脚手架中已经添加了electron-vue的工程模板，直接输入命令即可，详情亦可参考：https://electron.org.cn/vue/index.html

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev
复制代码

工程介绍

, 默认路由如红框所示，默认路由首页指向LandingPage.vue, 为求简单，网盘页面直接从LandingPage.vue开始修改。 components目录内包含了所有页面的.vue文件

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'landing-page',
      component: require('@/components/LandingPage').default
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})
复制代码