精华内容
下载资源
问答
  • 2021-06-19 16:29:00

    1、什么是vue
    Vue是一套用于构建用户界面的渐进式的JavaScript框架。
    2、Vue.js的优点
    体积小;
    更高的运行效率:基于虚拟DOM,一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化的技术,由于这种DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM;
    双向数据绑定:让开发者不用再去操作DOM对象,把更多的精力投入到业务逻辑上;
    生态丰富、学习成本低:市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件,拿来即用实现快速开发;
    3、为什么要使用Vue.js
    前端发展越来越好,前端开发能够处理的业务越来越多,网页也变得越来越强大和动态化。在目前的开发中,已经把很多服务端的代码放到了浏览器中来执行,这就产生了成千上万行的JavaScript代码,他们连接着各式各样的HTML和CSS文件,但是缺乏正规的组织形。
    Vue是一款友好的、多用途且高性能的JavaScript框架,它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架,也就是说,如果你已经有了现成的服务端应用,你可以将Vue作为该应用的一部分嵌入其中,带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现,那么Vue的核心库及其生态系统也可以满足你的各式需求。
    和其他框架一样,Vue允许你将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方。如果我们构建了一个大型的应用,可能需要将东西分割成为各自的组件和文件,使用Vue的命令行工具,使快速初始化一个真实的工程变得非常简单。
    4、MVC、MVP、MVVM 设计模式
    MVC(Model-View-Controller)是最常见的软件架构之一,在软件开发领域有着广泛的应用,MVC本身是比较好理解的,但是要讲清楚由它衍生出来的MVP和MVVM就不太容易了。
    4.1、MVC

    MVC的意思是,可以将软件分为三个部分:
    视图(View):用户界面
    控制器(Controller):业务逻辑
    模型(Model):数据保存
    各部分之间的通信方式为:

    View传送指令到Controller
    Controller完成业务逻辑后,要求Model改变状态
    Model将新的数据发送到View,用户得到反馈在这里插入图片描述

    MVC 模式的执行流程是有两种方式:

    (1)通过View接受指令,传递给Controller
    (2)直接通过Controller接受指令

    实际项目中往往采用更加灵活的方式,如下图:
    在这里插入图片描述

    (1)用户可以向View发送指令(DOM事件),再由View直接要求Model改变状态;
    (2)用户也可以直接向Controller发送指令(改变URL触发hashChange事件),再由Controller发送给view ;
    (3)Controller非常薄,只起到路由的作用,而View非常厚,业务逻辑都部署在View,所以有些框架里就直接取消了Controller,只保留一个Router(路由器)。

    4.2、MVP

    MVP(Model-View-Presenter),是从经典的MVC演变而来的。Mode提供数据,View负责显示,Presenter负责逻辑的处理。

    MVP和MVC有着一个重大的区别:

    在MVP中View与Model不发生联系,它们之间的通信是通过Presenter来进行的,所有的交互都发生在Presenter(即MVC中的Controller)内部;而在MVC中View会直接从Model中读取数据而不是通过Controller。
    MVP中各部分之间的通信是双向的,而在MVC中各部分之间的通信是单向的。
    在MVP中,View非常薄,不部署任何业务逻辑,称为“被动视图”(Passive View),即没有任何主动性,而Presenter非常厚,所有逻辑都部署在那里。
    如图所示:

    在这里插入图片描述
    4.3、MVVM

    MVVM(Model-View-ViewModel),它本质上是MVC的改进版,是针对MVC中的View进行了更细致的分工。ViewModel将视图UI和业务逻辑分开,它可以取出Model的数据,同时帮助处理View中由于需要展示内容而设计到的业务逻辑。

    在这里插入图片描述

    MVVM模式与MVP模式类似,唯一的区别是,它采用了数据双向绑定(data-binding),即View的变动自动反应在ViewModel,反之亦然。

    5、数据驱动(双向数据绑定)的原理
    数据驱动是Vue.js最大的特点。在vue中,所谓的数据驱动就是当数据发生变化时,用户界面发生相应的变化,开发者不需要手动的去修改DOM。

    vue实现数据双向绑定主要采用数据劫持,配合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter 和 getter ,在数据变动时发布消息给订阅者,触发相应监听回调。

    当一个普通 JavaScript 对象传给 Vue 实例来作为它的 data 选项时,vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter 。用户看不到 getter/setter ,但是在内部它们让vue追踪依赖,在属性被访问和修改时通知变化。

    vue的数据双向绑定将MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的Model的数据变化,通过Compile来解析编译模板指令(vue中用来解析{{}}模板语法),最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到 数据变化 —> 视图更新;视图交互变化(input)—> 数据model变更 双向绑定效果。

    getter和setter的理解

    当打印出vue实例下的data对象里的属性,它的每个属性都有两个对应的get和set方法。顾名思义,get为取值方法,set为赋值方法。正常情况下,取值和赋值是用 obj.prop 的方式,但是这样做有一个问题,我们如何知道对象的值改变了?

    我们可以把get和set理解为function,当我们调用对象的属性时,会进入到 get.属性(){…} 中,先判断对象是否有这个属性,如果没有,那么就添加一个name属性,并给它赋值;如果有name属性,那么就返回name属性。可以把get看成一个取值的函数,函数的返回值就是它拿到的值。

    当给实例赋值时,会进入 set.属性(val){…} 中,形参val就是赋给属性的值,在这个函数里做了很多事情,比如双向绑定等等。因为这个值每次都要经过set,其他方式无法对该值做修改。在ES5中,对象原型有两个属性,defineGetterdefineSetter ,专门用来给对象绑定get和set。

    6、虚拟DOM
    6.1 什么是虚拟DOM

    在Vue.js 2.0版本中引入了 Virtual DOM 的概念,Virtual DOM 其实就是一个以JavaScript对象(VNode节点)作为基础来模拟DOM结构的树形结构,这个树形结构包含了整个DOM结构的信息。简单来说,可以把Virtual DOM理解为一个简单的JS对象,并且最少包含标签名(tag)、属性(attrs)和子元素对象(children)三个属性。不同的框架对这三个属性的命名会有所差别。
    6.2 虚拟DOM的作用

    虚拟DOM的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话,会有很多不必要的DOM操作。例如,一个ul标签下有很多个li标签,其中只有一个li标签有变化,这种情况下如果使用新的ul去替代旧的ul,会因为这些不必要的DOM操作而造成性能上的浪费。

    为了避免不必要的DOM操作,虚拟DOM在虚拟节点映射到视图的过程中,将虚拟节点与上一次渲染视图所使用的旧虚拟节点做对比,找出真正需要更新的节点来进行DOM操作,从而避免操作其他不需要改动的DOM元素。

    其实,虚拟DOM在Vue.js中主要做了两件事情:

    提供与真实DOM节点所对应的虚拟节点VNode
    将虚拟节点VNode和旧虚拟节点oldVNode进行对比,然后更新视图

    6.3 为什么要使用虚拟DOM

    具备跨平台优势,由于Virtual DOM 是以JavaScript对象为基础而不依赖真实平台环境,所以使它具有了跨平台的能力,比如说浏览器平台、Weex、Node等。
    操作DOM慢,JS运行效率高,可以将DOM对比操作放在JS层,提高效率。因为DOM操作的执行速度远不如JavaScript运算速度快,因此,把大量的DOM操作搬运到JavaScript中,运用patching算法来计算出真正需要更新的节点,最大限度地减少DOM操作,从而显著提高性能。Vritual DOM本质上就是在JS和DOM之间做了一个缓存,JS只操作Virtual DOM,最后把变更写入到真实DOM。
    提高渲染性能,Virtual DOM的优势不在于单次的操作,而是在大量、频繁的数据更新下,能够对视图进行合理、高效的更新。

    转自:https://www.cnblogs.com/yjd-05/p/13397707.html

    更多相关内容
  • 受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上 Web 开发的低成本、高效率的优势,这种跨平台方式越来越受到开发者的喜爱。 Electron 是一...

    来源 | xiangzhihong

    前言

    虽然 B/S 是目前开发的主流,但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上 Web 开发的低成本、高效率的优势,这种跨平台方式越来越受到开发者的喜爱。

    Electron 是一个基于 Chromium 和 Node.js,使用 HTML、CSS 和 JavaScript 来构建跨平台应用的跨平台开发框架,兼容 Mac、Windows 和 Linux。目前,Electron 已经创建了包括 VScode 和 Atom 在内的大量应用。

    环境搭建

    创建 Electron 跨平台应用之前,需要先安装一些常用的工具,如 Node、vue 和 Electron 等。

    安装 Node

    进入 Node 官网下载页 http://nodejs.cn/download/,然后下载对应的版本即可,下载时建议下载稳定版本。如果安装 Node 使用 Homebrew 方式,建议安装时将 npm 仓库镜像改为淘宝镜像,如下所示。

    npm config set registry http://registry.npm.taobao.org/
    或者
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    安装/升级 vue-cli

    先执行以下命令,确认下本地安装的 vue-cli 版本。

    vue -V
    
    

    如果没有安装或者不是最新版,可以执行以下命令安装/升级。

    npm install @vue/cli -g
    
    

    安装 Electron

    使用如下命令安装 Electron 插件。

    npm install -g electron
    或者
    cnpm install -g electron
    
    

    为了验证是否安装成功,可以使用如下的命令。

    electron --version
    
    

    创建运行项目

    Electron 官方提供了一个简单的项目,可以执行以下命令将项目克隆到本地。

    git clone https://github.com/electron/electron-quick-start
    
    

    然后在项目中执行如下命令即可启动项目。

    cd electron-quick-start
    npm install
    npm start
    
    

    启动后项目的效果如下图。

    除此之外,我们可以使用 vue-cli 脚手架工具来创建项目。

    vue init simulatedgreg/electron-vue
    
    

    然后根据下面的提示一步步选中选项即可创建项目,如下所示。

    然后,使用 npm install 命令安装项目所需要的依赖包,安装完成之后,可以使用 npm run dev 或 npm run build 命令运行 electron-vue 模版应用程序,运行效果如下图所示。

    Electron 源码目录

    Electron 的源代码主要依据 Chromium 的拆分约定被拆成了许多部分。为了更好地理解源代码,您可能需要了解一下 Chromium 的多进程架构。

    Electron 源码目录结构和含义具体如下:

    Electron
    ├──atom - Electron 的源代码
    |  ├── app - 系统入口代码
    |  ├── browser - 包含了主窗口、UI 和其他所有与主进程有关的东西,它会告诉渲染进程如何管理页面
    |  |   ├── lib - 主进程初始化代码中 JavaScript 部分的代码
    |  |   ├── ui - 不同平台上 UI 部分的实现
    |  |   |   ├── cocoa - Cocoa 部分的源代码
    |  |   |   ├── gtk - GTK+ 部分的源代码
    |  |   |   └── win - Windows GUI 部分的源代码
    |  |   ├── default_app - 在没有指定 app 的情况下 Electron 启动时默认显示的页面
    |  |   ├── api - 主进程 API 的实现
    |  |   |   └── lib - API 实现中 Javascript 部分的代码
    |  |   ├── net - 网络相关的代码
    |  |   ├── mac - 与 Mac 有关的 Objective-C 代码
    |  |   └── resources - 图标,平台相关的文件等
    |  ├── renderer - 运行在渲染进程中的代码
    |  |   ├── lib - 渲染进程初始化代码中 JavaScript 部分的代码
    |  |   └── api - 渲染进程 API 的实现
    |  |       └── lib - API 实现中 Javascript 部分的代码
    |  └── common - 同时被主进程和渲染进程用到的代码,包括了一些用来将 node 的事件循环
    |      |        整合到 Chromium 的事件循环中时用到的工具函数和代码
    |      ├── lib - 同时被主进程和渲染进程使用到的 Javascript 初始化代码
    |      └── api - 同时被主进程和渲染进程使用到的 API 的实现以及 Electron 内置模块的基础设施
    |          └── lib - API 实现中 Javascript 部分的代码
    ├── chromium_src - 从 Chromium 项目中拷贝来的代码
    ├── docs - 英语版本的文档
    ├── docs-translations - 各种语言版本的文档翻译
    ├── spec - 自动化测试
    ├── atom.gyp - Electron 的构建规则
    └── common.gypi - 为诸如 `node` 和 `breakpad` 等其他组件准备的编译设置和构建规则
    
    

    平时开发时,需要重点关注的就是 src、package.json 和 appveyor.yml 目录。除此之外,其他需要注意的目录如下:

    • script - 用于诸如构建、打包、测试等开发用途的脚本

    • tools - 在 gyp 文件中用到的工具脚本,但与 script 目录不同, 该目录中的脚本不应该被用户直接调用

    • vendor - 第三方依赖项的源代码,为了防止人们将它与 Chromium 源码中的同名目录相混淆, 在这里我们不使用 third_party 作为目录名

    • node_modules - 在构建中用到的第三方 node 模块

    • out - ninja 的临时输出目录

    • dist - 由脚本 script/create-dist.py 创建的临时发布目录

    • external_binaries - 下载的不支持通过 gyp 构建的预编译第三方框架

    应用工程目录

    使用 electron-vue 模版创建的 Electron 工程结构如下图。

    和前端工程的项目结构类似,Electron 项目的目录结构如下所示:

    • electron-vue:Electron模版配置。

    • build:文件夹,用来存放项目构建脚本。

    • config:中存放项目的一些基本配置信息,最常用的就是端口转发。

    • node_modules:这个目录存放的是项目的所有依赖,即 npm install 命令下载下来的文件。

    • src:这个目录下存放项目的源码,即开发者写的代码放在这里。

    • static:用来存放静态资源。

    • index.html:则是项目的首页、入口页,也是整个项目唯一的HTML页面。

    • package.json:中定义了项目的所有依赖,包括开发时依赖和发布时依赖。

    对于开发者来说, 90% 的工作都是在 src 中完成,src 中的文件目录如下。

    Electron 应用程序分成三个基础模块:主进程、进程间通信和渲染进程。

    1、主进程

    Electron 运行 package.json 的 main 脚本(background.js)的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。

    2、渲染进程

    由于 Electron 使用了 Chromium 来展示 Web 页面,所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 Web 页面运行在它自己的渲染进程中。在普通的浏览器中,Web 页面通常在一个沙盒环境中运行,不被允许去接触原生的资源。然而 Electron 允许用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

    3、主进程与渲染进程通信

    主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。主进程管理所有的 Web 页面和它们对应的渲染进程。每个渲染进程都是独立的,它只关心它所运行的 Web 页面。

    src 目录结构

    在 Electron 目录中,src 会包包含 main 和 renderer 两个目录。

    main 目录

    main 目录会包含 index.js 和 index.dev.js 两个文件。

    • index.js:应用程序的主文件,electron 也从这里启动的,它也被用作 webpack 产品构建的入口文件,所有的 main 进程工作都应该从这里开始。

      index.dev.js:此文件专门用于开发阶段,因为它会安装 electron-debug 和 vue-devtools。一般不需要修改此文件,但它可以扩展开发的需求。

    渲染进程

    renderer 是渲染进程目录,平时项目开发源码的存放目录,包含 assets、components、router、store、App.vue 和 main.js。

    assets:assets 下的文件如(js、css)都会在 dist 文件夹下面的项目目录分别合并到一个文件里面去。components:此文件用于存放应用开发的组件,可以是自定义的组件。router:如果你了解 vue-router,那么 Electron 项目的路由的使用方式和 vue-router 的使用方式类似。modules:electron-vue 利用 vuex 的模块结构创建多个数据存储,并保存在 src/renderer/store/modules 中。

    相关案例

    • https://github.com/xiaozhu188/electron-vue-cloud-music

    • https://github.com/SmallRuralDog/electron-vue-music

    ❤️爱心三连击1.看到这里了就点个在看支持下吧,你的「在看」是我创作的动力。
    2.关注公众号程序员成长指北,「带你一起学Node」!
    3.添加微信【ikoala520】,拉你进技术交流群一起学习。
    
    
    
    “在看转发”是最大的支持
    
    展开全文
  • Electron12+vue-cli3开发跨平台桌面应用

    千次阅读 2022-03-24 08:42:22
    Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,...

    Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种方式越来越受到开发者的喜爱。

    本文教你如何使用Electron12和vue-cli3,在完全保留vue开发web应用的习惯下,搭建桌面应用。

    ※注:本文代码区域每行开头的“+”表示新增,“-”表示删除,“M”表示修改;代码中的“…”表示省略。

    解决npm在国内访问慢的问题

    逐条执行一下命令

    npm config set registry https://registry.npm.taobao.org
    npm config set disturl https://npm.taobao.org/dist
    npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
    npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
    npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
    

    安装/升级vue-cli3

    先执行以下命令,确认下本地安装的vue-cli版本:

    vue -V
    

    我个人因重新安装, 已是5.0.4版本
    如果本地使用的是vue-cli2.x或者更早版本,可先卸载:

    npm uninstall vue-cli -g
    

    如果还没有安装vue-cli3,先执行以下命令安装:

    npm install @vue/cli -g
    

    新建VUE项目

    这里就不多赘述了,网上一大堆。

    自动安装electron

    进入上面新建的Vue项目根目录,并执行命令

    vue add electron-builder
    

    安装比较慢,需要耗费一些时间
    安装electron

    接下来出现配置选项:
    选择Electron版本
    选择Electron版本。我这里选择的时 “^12.0.0”。
    然后耐心等待安装完成。如果中间出现错误中断了,请重复此步骤。
    在这里插入图片描述
    安装完成后会自动在src目录下生成background.js并修改了package.json。

    ※注:由于网络原因,如果中间出现过中断失败,再次重新安装可能会很快完成,但实际上electron可能并未安装完全。建议完成以上步骤后,直接删除项目根目录的node_modules/,并且执行npm install,从国内镜像重新安装所有依赖包。

    部分电脑可能不会自动生成background.js,则需要手动新建。代码如下:

    'use strict'
    
    import { app, protocol, BrowserWindow } from 'electron'
    import {
      createProtocol,
      installVueDevtools
    } from 'vue-cli-plugin-electron-builder/lib'
    
    const isDevelopment = process.env.NODE_ENV !== 'production'
    
    // Keep a global reference of the window object, if you don't, the window will
    // be closed automatically when the JavaScript object is garbage collected.
    let win
    
    // Scheme must be registered before the app is ready
    protocol.registerSchemesAsPrivileged([{
      scheme: 'app',
      privileges: {
        secure: true,
        standard: true
      }
    }])
    
    function createWindow () {
      // Create the browser window.
      win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      })
    
      if (process.env.WEBPACK_DEV_SERVER_URL) {
        // Load the url of the dev server if in development mode
        win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
        if (!process.env.IS_TEST) win.webContents.openDevTools()
      } else {
        createProtocol('app')
        // Load the index.html when not in development
        win.loadURL('app://./public/index.html')
      }
    
      win.on('closed', () => {
        win = null
      })
    }
    
    // Quit when all windows are closed.
    app.on('window-all-closed', () => {
      // On macOS it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })
    
    app.on('activate', () => {
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (win === null) {
        createWindow()
      }
    })
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', async () => {
      if (isDevelopment && !process.env.IS_TEST) {
        // Install Vue Devtools
        try {
          await installVueDevtools()
        } catch (e) {
          console.error('Vue Devtools failed to install:', e.toString())
        }
      }
      createWindow()
    })
    
    // Exit cleanly on request from parent process in development mode.
    if (isDevelopment) {
      if (process.platform === 'win32') {
        process.on('message', data => {
          if (data === 'graceful-exit') {
            app.quit()
          }
        })
      } else {
        process.on('SIGTERM', () => {
          app.quit()
        })
      }
    }
    

    手动安装electron

    ※注:如果已经通过上一节自动安装的操作,请直接跳过本小节。
    修改package.json,添加以下内容(有+号表示新增内容):

    {
      "scripts": {
        "lint": "eslint --ext .js,.vue src",
        "build:prod": "vue-cli-service build",
        "build:stage": "vue-cli-service build --mode staging",
        "dev": "vue-cli-service serve",
    +    "electron:build": "vue-cli-service electron:build",
    +    "electron:serve": "vue-cli-service electron:serve",
    +    "postinstall": "electron-builder install-app-deps",
    +    "postuninstall": "electron-builder install-app-deps",
    +    "preview": "node build/index.js --preview"
      },
    +  "main": "background.js",
      "dependencies": {
        "@riophae/vue-treeselect": "0.4.0",
        "axios": "0.24.0",
        "clipboard": "2.0.8",
    +    "core-js": "3.19.1",
        "echarts": "4.9.0",
        "element-ui": "2.15.6",
        "file-saver": "2.0.5",
        "fuse.js": "6.4.3",
        "highlight.js": "9.18.5",
        "js-beautify": "1.13.0",
        "js-cookie": "3.0.1",
        "jsencrypt": "3.2.1",
        "nprogress": "0.2.0",
        "quill": "1.3.7",
        "screenfull": "5.0.2",
        "sortablejs": "1.10.2",
        "vue": "2.6.12",
        "vue-count-to": "1.0.13",
        "vue-cropper": "0.5.5",
        "vue-meta": "2.4.0",
        "vue-router": "3.4.9",
        "vuedraggable": "2.24.3",
        "vuex": "3.6.0"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "4.4.6",
        "@vue/cli-plugin-eslint": "4.4.6",
        "@vue/cli-service": "4.4.6",
        "babel-eslint": "10.1.0",
        "babel-plugin-dynamic-import-node": "2.3.3",
        "chalk": "4.1.0",
        "compression-webpack-plugin": "5.0.2",
        "connect": "3.6.6",
    +    "electron": "^12.0.0",
    +    "electron-devtools-installer": "^3.1.0",
        "eslint": "7.15.0",
        "eslint-plugin-vue": "7.2.0",
        "lint-staged": "10.5.3",
        "runjs": "4.4.2",
        "sass": "1.32.13",
        "sass-loader": "10.1.1",
        "script-ext-html-webpack-plugin": "2.1.5",
        "svg-sprite-loader": "5.1.1",
    +    "vue-cli-plugin-electron-builder": "~2.1.1",
        "vue-template-compiler": "2.6.12"
      },
    }
    

    安装依赖包

    安装完electron后,在项目根目录执行,安装全部依赖包:

    npm install
    

    编译并启动应用

    npm run electron:serve
    

    在这里插入图片描述
    在这里插入图片描述

    设置应用窗口大小

    修改background.js:

    function createWindow () {
          win = new BrowserWindow({
           	width: 1200,
          	height: 620,
            webPreferences: {
              nodeIntegration: true
            }
          })
     }
    

    取消跨域限制

    function createWindow () {
          // Create the browser window.
          win = new BrowserWindow({
            width: 1200,
            height: 620,
            webPreferences: {
             	webSecurity: false,
              	nodeIntegration: true
            }
          })
    }
    
    展开全文
  • 受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种跨平台方式越来越受到开发者的喜爱。 Electron是一个...

    来源 | https://segmentfault.com/a/1190000021376934

    虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种跨平台方式越来越受到开发者的喜爱。

    Electron是一个基于Chromium和 Node.js,使用 HTML、CSS和JavaScript来构建跨平台应用的跨平台开发框架,兼容 Mac、Windows 和 Linux。目前,Electron已经创建了包括VScode和Atom在内的大量应用。

    环境搭建

    创建Electron跨平台应用之前,需要先安装一些常用的工具,如Node、vue和Electron等。

    安装Node

    进入Node官网下载页http://nodejs.cn/download/,然后下载对应的版本即可,下载时建议下载稳定版本。如果安装Node使用Homebrew方式,建议安装时将npm仓库镜像改为淘宝镜像,如下所示。

    npm config set registry http://registry.npm.taobao.org/
    或者
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    安装/升级vue-cli

    先执行以下命令,确认下本地安装的vue-cli版本。

    vue -V
    

    如果没有安装或者不是最新版,可以执行以下命令安装/升级。

    npm install @vue/cli -g
    

    安装Electron

    使用如下命令安装Electron插件。

    npm install -g electron
    或者
    cnpm install -g electron
    

    为了验证是否安装成功,可以使用如下的命令。

    electron --version
    

    创建运行项目

    Electron官方提高了一个简单的项目,可以执行以下命令将项目克隆到本地。

    git clone https://github.com/electron/electron-quick-start
    

    然后在项目中执行如下命令即可启动项目。

    cd electron-quick-start
    npm install 
    npm start
    

    启动后项目的效果如下图。


    除此之外,我们可以使用vue-cli脚手架工具来创建项目。

    vue init simulatedgreg/electron-vue
    

    然后根据下面的提示一步步选中选项即可创建项目,如下所示。


    然后,使用npm install命令安装项目所需要的依赖包,安装完成之后,可以使用npm run dev或npm run build命令运行electron-vue模版应用程序,运行效果如下图所示。

    Electron源码目录

    Electron 的源代码主要依据 Chromium 的拆分约定被拆成了许多部分。为了更好地理解源代码,您可能需要了解一下 Chromium 的多进程架构。
    Electron源码目录结构和含义具体如下:

    Electron
    ├──atom - Electron 的源代码
    |  ├── app - 系统入口代码
    |  ├── browser - 包含了主窗口、UI 和其他所有与主进程有关的东西,它会告诉渲染进程如何管理页面
    |  |   ├── lib - 主进程初始化代码中 JavaScript 部分的代码
    |  |   ├── ui - 不同平台上 UI 部分的实现
    |  |   |   ├── cocoa - Cocoa 部分的源代码
    |  |   |   ├── gtk - GTK+ 部分的源代码
    |  |   |   └── win - Windows GUI 部分的源代码
    |  |   ├── default_app - 在没有指定 app 的情况下 Electron 启动时默认显示的页面
    |  |   ├── api - 主进程 API 的实现
    |  |   |   └── lib - API 实现中 Javascript 部分的代码
    |  |   ├── net - 网络相关的代码
    |  |   ├── mac - 与 Mac 有关的 Objective-C 代码
    |  |   └── resources - 图标,平台相关的文件等
    |  ├── renderer - 运行在渲染进程中的代码
    |  |   ├── lib - 渲染进程初始化代码中 JavaScript 部分的代码
    |  |   └── api - 渲染进程 API 的实现
    |  |       └── lib - API 实现中 Javascript 部分的代码
    |  └── common - 同时被主进程和渲染进程用到的代码,包括了一些用来将 node 的事件循环
    |      |        整合到 Chromium 的事件循环中时用到的工具函数和代码
    |      ├── lib - 同时被主进程和渲染进程使用到的 Javascript 初始化代码
    |      └── api - 同时被主进程和渲染进程使用到的 API 的实现以及 Electron 内置模块的基础设施
    |          └── lib - API 实现中 Javascript 部分的代码
    ├── chromium_src - 从 Chromium 项目中拷贝来的代码
    ├── docs - 英语版本的文档
    ├── docs-translations - 各种语言版本的文档翻译
    ├── spec - 自动化测试
    ├── atom.gyp - Electron 的构建规则
    └── common.gypi - 为诸如 `node` 和 `breakpad` 等其他组件准备的编译设置和构建规则
    

    平时开发时,需要重点关注的就是src、package.json和appveyor.yml目录。除此之外,其他需要注意的目录如下:

    • script - 用于诸如构建、打包、测试等开发用途的脚本

    • tools - 在 gyp 文件中用到的工具脚本,但与 script 目录不同, 该目录中的脚本不应该被用户直接调用

    • vendor - 第三方依赖项的源代码,为了防止人们将它与 Chromium 源码中的同名目录相混淆, 在这里我们不使用 third_party 作为目录名

    • node_modules - 在构建中用到的第三方 node 模块

    • out - ninja 的临时输出目录

    • dist - 由脚本 script/create-dist.py 创建的临时发布目录

    • external_binaries - 下载的不支持通过 gyp 构建的预编译第三方框架

    应用工程目录

    使用electron-vue模版创建的Electron工程结构如下图。


    和前端工程的项目结构类似,Electron项目的目录结构如下所示:

    • electron-vue:Electron模版配置。

    • build:文件夹,用来存放项目构建脚本。

    • config:中存放项目的一些基本配置信息,最常用的就是端口转发。

    • node_modules:这个目录存放的是项目的所有依赖,即 npm install 命令下载下来的文件。

    • src:这个目录下存放项目的源码,即开发者写的代码放在这里。

    • static:用来存放静态资源。

    • index.html:则是项目的首页、入口页,也是整个项目唯一的HTML页面。

    • package.json:中定义了项目的所有依赖,包括开发时依赖和发布时依赖。

    对于开发者来说, 90% 的工作都是在 src 中完成,src 中的文件目录如下。

    Electron应用程序分成三个基础模块:主进程、进程间通信和渲染进程。

    【主进程】

    Electron 运行 package.json 的 main 脚本(background.js)的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。

    【渲染进程】

    由于 Electron 使用了 Chromium 来展示 Web 页面,所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 Web 页面运行在它自己的渲染进程中。在普通的浏览器中,Web页面通常在一个沙盒环境中运行,不被允许去接触原生的资源。然而 Electron 允许用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

    【主进程与渲染进程通信】

    主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。主进程管理所有的Web页面和它们对应的渲染进程。每个渲染进程都是独立的,它只关心它所运行的 Web 页面。

    src目录结构

    在Electron目录中,src会包包含main和renderer两个目录。

    main目录

    main目录会包含index.js和index.dev.js两个文件。

    • index.js:应用程序的主文件,electron 也从这里启动的,它也被用作 webpack 产品构建的入口文件,所有的 main 进程工作都应该从这里开始。

    • index.dev.js:此文件专门用于开发阶段,因为它会安装 electron-debug 和 vue-devtools。一般不需要修改此文件,但它可以扩展开发的需求。

    渲染进程

    renderer是渲染进程目录,平时项目开发源码的存放目录,包含assets、components、router、store、App.vue和main.js。

    • assets:assets下的文件如(js、css)都会在dist文件夹下面的项目目录分别合并到一个文件里面去。

    • components:此文件用于存放应用开发的组件,可以是自定义的组件。

    • router:如果你了解vue-router,那么Electron项目的路由的使用方式和vue-router的使用方式类似。

    • modules:electron-vue 利用 vuex 的模块结构创建多个数据存储,并保存在 src/renderer/store/modules 中。

    综合示例

    1、网易云音乐

    electron-vue-cloud-music是一款使用Electron+Vue+Ant Design Vue技术开发跨平台桌面应用。下载链接:https://github.com/xiaozhu188/electron-vue-cloud-music。具有如下特点:

    • 拖拽播放

    • 桌面歌词

    • mini模式

    • 自定义托盘右键菜单

    • 任务栏缩略图,歌曲操作

    • 音频可视化

    • 自动/手动检查更新

    • Nedb数据库持久化

    • 自定义安装路径,安装界面美化

    • 浏览器中启动客户端

    • Travis CL,AppVeyor自动构建

    • 换肤,下载,本地歌曲匹配,网络变化桌面通知,分享歌曲/歌单/MV/视频等到QQ空间

    • 登录,私人Fm,歌单,专辑,歌手,排行榜,MV,视频,评论,搜索,用户,动态,粉丝,关注,云盘,收藏...

    • 心动模式,歌词微调,下一首播放,追加播放,单曲循环,随机播放,列表循环

    • 路由导向,局部刷新,首页栏目调整并持久化...

    以下是部分运行效果:

    2、qq音乐播放器

    qq音乐播放器基于 electron-vue 开发的音乐播放器,界面模仿QQ音乐,使用的技术栈electron-vue+vue+vuex+vue-router+element- UI。可以使用如下的方式来运行项目。

    git clone https://github.com/SmallRuralDog/electron-vue-music.git
    
    
    cd electron-vue-music
    
    
    npm install
    
    
    # 运行开发模式
    npm run dev
    
    
    # 打包安装文件 
    npm run build
    

    部分运行效果如下图。

    展开全文
  • 受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种跨平台方式越来越受到开发者的喜爱。 Electron是一个...
  • 受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种跨平台方式越来越受到开发者的喜爱。 Electron是一个...
  • 1.3 为什么不使用electron-vue搭建呢 1.4 安装/升级vue-cli3 1.5 创建vue项目 1.6 自动安装Electron 1.7 手动安装Electron 1.8 编译并启动APP 2.配置项目 2.1 配置ESLint代码格式检查工具 2.2 ...
  • 其他基于 ELECTRON-VUE 的作品 基础综合介绍: 虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多...
  • 跨平台开发解决方案浅谈

    千次阅读 2021-10-31 15:27:45
    跨平台开发解决方案浅谈 前言 本文所讨论技术都是基于大前端生态下的 本文所指跨平台概念无特殊说明时泛指跨安卓和ios 用前端工程化技术开发出app也是本文所讲重点 作为用户来说,当然希望使用App的时候能够顺畅...
  • 跨平台之uni-app

    千次阅读 2019-07-23 12:27:58
    文章目录起源什么是uni-app为什么选择uni-app呢?...原本微信小程序其实算是跨平台了,但是近来微信小程序的审核速度堪忧,从最开始的半小时到现在的两三天都不一定过,所以移动端也不能完全抛弃,毕竟...
  • vue2中,虚拟dom是全量比较的。 在vue3中,增加了静态标记PatchFlag。在创建vnode的时候,会根据vnode的内容是否可以变化,为其添加静态标记PatchFlag。diff的时候,只会比较有PatchFlag的节点。PatchFlag是有类型...
  • Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,...
  • 本文主要采用安全性高,稳定性强和具有跨平台优势VUE语言和功能强大开源免费的MYSQL数据库进行开发。 社区商场管理后台账务管理系统主要包含以下几个模块:系统管理、报表管理、仓库管理与销售分析图表等几大模块...
  • 根据一些老博客里面的内容,现在整理一下目前流行的跨平台移动App开发技术的特点,并将几个不同的开发平台框架进行比较说明,仅供大家参考。 每个开发框架几乎都包含以下特性: 使用 HTML5 + CSS + JavaScrip
  • 跨平台解决方案 了解cordova “Apache Cordova是一个开源移动开发框架,它允许您使用标准的Web技术,如HTML5,CSS3和JavaScript进行跨平台开发,避免每个移动平台本机开发语言。应用程序在针对每个平台的包装内执行...
  • 2021最新15个App跨平台开发框架

    千次阅读 2020-11-26 16:35:54
    作为用户来说,当然希望使用App的时候能够顺畅流利,不可否认的是,使用iOS和Android开发出来的应用非常流畅而且高效,但是缺点就是需要耗费较长的时间来开发,比如...所以人们希望选择使用跨平台应用来解决这一问题。
  • 博文目录一、移动端跨平台开发技术栈的前世今生二、学习总结与经验分享三、心得体会四、2022移动端跨平台技术趋势预测4.1 React Native4.2 Flutter4.3 总结五、拓展阅读 一、移动端跨平台开发技术栈的前世今生 ...
  • Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,...
  • 跨平台开发框架总结

    千次阅读 2020-04-20 10:23:44
    根据跨平台的框架功能,我把跨平台框架主要分为3大类,分别是: Web App网页、Hybrid框架、含有编译转换的框架。 Web App网页 Web App其实不算是严格意义上的App,我觉得应该把它称作网页端自适应移动版更合适。 ...
  • 受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上 Web 开发的低成本、高效率的优势,这种跨平台方式越来越受到开发者的喜爱。 Electron 是一...
  • 跨平台桌面开发,究竟是应该选择Electron还是WebView2,一文以说清楚。
  • 跨平台移动应用开发概念移动应用开发分类Native appWeb appHybrid app三者的区别关于native.js的理解典型跨平台移动APP开发框架H5与H5+H5 appH5+ appuni-app 移动应用开发分类 Native app 即原生APP开发模式,利用...
  • luch-request(基于 Promise 开发的 uni-app 跨平台、项目级别的请求库) 我们承诺将定期赞助的开源项目(感谢巨人) 鸣谢 Project vue element-ui element-plus ant-design-vue mock ...
  • 完全响应式框架的UI组件库,基于封装,兼容React , Vue等前端框架,或者在electron中间发布,设计规范参考了Google ,并针对移动端进行了优化,适用于需要同时兼容移动端的Web项目,门户网站,后台管理系统等。...
  • 第一章:初识vue 回顾webpack: 3w1h 1.打包工具 项目构建工具 2.为什么使用webpack 3.webpack怎么使用 ​ 概念: ​ mode 模式 development , production ​ entry 入口 项目的入口 ​ output 出口 打包的出口 ​...
  • 年初的时候,跨平台你说是伪需求吧,其实也有用,你说是硬需求吧,其实有点伪。 年末再来总结一下,大项目不缺原生程序员,不需要跨平台,小项目人手不够为了占领多平台才是硬需求。 我觉得国内最大的跨平台需求在小...
  • 近些年来,不断的有前端跨平台方案涌现出来,比如基于WebView的Cordova,还有渲染成原生控件的Reactive、Weex等,那么,这些跨平台方案有什么通用的实现思路呢,而Flutter的设计思路与他们的区别又是什么呢。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,467
精华内容 1,786
关键字:

vue 跨平台 优势