基于Electron24+Vite4+Vue3搭建桌面端应用

一说到创建桌面应用,就不得不提及Electron和Tauri框架。这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序。

之前也有使用vite2+vue3+electronc创建桌面端项目,不过 vue-cli-plugin-electron-builder 脚手架插件构建的项目electron版本只有13.x。如今electron版本都到了24,显然不能再用之前的方法创建项目了。于是闲暇时间就捣鼓了electron24+vite4搭建桌面程序,中间踩了不少坑,现记录如下,希望对大家有所帮助~~

版本信息

vite: ^4.3.2
vue: ^3.2.47
electron: ^24.4.0
electron-builder: ^23.6.0

创建vite4+vue3项目

vite官网提供了npm/yarn/pnpm等方式创建vue3项目。

yarn create vite electron-vite4-vue3
cd electron-vite4-vue3
yarn install
yarn dev

到这里一个简单的vite3+vue3项目就初始化好了。

安装Electron及相关依赖包

基础vue3项目创建好后,需要在项目中安装一些electron依赖的包。如果在安装过程中卡住或失败,建议切换淘宝镜像,使用cnpm安装。

# 安装electron
yarn add -D electron
# 安装electron
-builder 用于打包可安装exe程序和绿色版免安装exe程序 yarn add -D electron-builder
# 安装electron
-devtools-installer 用于开发调试electron yarn add -D electron-devtools-installer

到这一步还需要安装一个构建electron程序的vite插件 vite-plugin-electron 

yarn add -D vite-plugin-electron

vite-plugin-electron :用于构建electron应用程序的vite插件。仅需少量配置,即可快速整合vite electron开发环境。

该插件集成了Vite和Electron,方便在渲染进程中使用Node API或者Electron API功能。

http://github.com/electron-vite/vite-plugin-electron

新建主进程文件

在项目根目录新建background.js文件,编写主进程代码。

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

// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

const createWindow = () => {
    const win = new BrowserWindow({
        // 窗口图标
        icon: join(__dirname, 'resource/shortcut.ico'),
        width: 800,
        height: 600,
        webPreferences: {
            // contextIsolation: false,
            // nodeIntegration: true,
            // preload: path.join(__dirname, 'preload.js')
        }
    })
    // 加载vue url视本地环境而定,如http://localhost:5173
    // win.loadURL('http://localhost:3000')

    // development模式
    if(process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
        // 开启调试台
        win.webContents.openDevTools()
    }else {
        win.loadFile(join(__dirname, 'dist/index.html'))
    }
}

app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

接下来在vite.config.js中引入vite-plugin-electron插件,配置主进程入口,将electron和vite项目结合起来。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

// http://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        electron({
            // 主进程入口文件
            entry: 'background.js'
        })
    ],
    /*开发服务器选项*/
    server: {
        // 端口
        port: 3000,
    }
})

如果到这一步,运行yarn dev会报错,需要在package.json文件中加入 "main": "background.js" 入口配置。

如果报错如下,需要去掉package.json文件中 "type": "module" 配置。

完整的package.json配置如下

{
  "name": "electron-vite4-vue3",
  "private": true,
  "version": "0.0.0",
  "description": "基于Electron24+Vite4.x+Vue3搭建项目框架",
  "author": "andy <282310962@qq.com>",
  "copyright": "MIT License(MIT) ©2023 Andy",
  "main": "background.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:serve": "vite --host",
    "electron:build": "vite build && electron-builder"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "electron": "^24.4.0",
    "electron-builder": "^23.6.0",
    "electron-devtools-installer": "^3.2.0",
    "vite": "^4.3.2",
    "vite-plugin-electron": "^0.11.2"
  }
}

到这里,yarn dev启动项目,就能成功运行了。

electron-builder打包配置

项目已经运行起来了,接下来就需要配置一些electron-builder打包脚本了。在项目根目录新建electron-builder.json配置文件。

话不多说,直接上代码:

{
    "productName": "ElectronVite4Vue3",
    "appId": "cc.xiaoyan.electron-vite4-vue3",
    "copyright": "Copyright © 2023-present Andy",
    "compression": "maximum",
    "asar": true, // 打包格式压缩
    "directories": {
        "output": "release/${version}"  // 打包输出目录
    },
    // 配置extraResources后,electron-builder会在打包时将extraResources中指定的文件复制到打包后应用程序的根目录/resources文件夹下
    /*"extraResources": [
        {
            "from": "./resource",
            "to": "resource"
        }
    ],*/
    "nsis": {
        "oneClick": false,
        "allowToChangeInstallationDirectory": true,
        "perMachine": true,
        "deleteAppDataOnUninstall": true,
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true,
        "shortcutName": "ElectronVite4Vue3"
    },
    "win": {
        "icon": "./resource/shortcut.ico",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}",
        "target": [
            {
                "target": "nsis",
                "arch": ["ia32"]
            }
        ]
    },
    "mac": {
        "icon": "./resource/shortcut.icns",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
    },
    "linux": {
        "icon": "./resource",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
    }
}

打包构建

yarn electron:build

 图标等资源文件放在resource目录下

打包后显示的任务栏及程序图标。

打包程序图标配置

窗口图标配置

主进程中的__dirname变量指向当前主进程文件的目录。

至此一个简易版的electron24+vite4跨端项目就搭建好了,至于主进程/渲染进程之间的通讯后续再分享哈~~

 

本文为博主原创文章,未经博主允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
本文转载于网络 如有侵权请联系删除

相关文章

  • 移动apn接入点哪个快(移动哪个接入点网速快)

    大家好,又见面了,我是你们的朋友全栈君。9条解答1.中国移动4g接入点最快我不同意,中国LTE才是最快的,就是流量怕你不够,名称:LTE,APN:lte(小写的),APN协议漫游协议lpv4,我的达到了2.5~3M/S,骗你出家2.4g网速很慢,求助apn设置方法您好!您先进入手机的接入点设置–新建apn接入点–名称乱填,apn:cmtds–保存保存之后,选择自己刚刚设置的接入点,然后您就会发现您自己的手机4G网络的速度很快了,原理就是手机的默认接入点很多人都在使用,所以会导致手机网络卡顿,而我刚刚说的那个接入点很少人知道,所以使用的人少了,网速自然也就变快了望采纳3.中国移动4g网络接入点中国移动4g接入点可以通过以下的方法与步骤来设置:首先在手机的主界面找到手机的设置,点击进入手机的设置;在设置页面找到移动网络连接,然后选择移动网络连接;在移动网络连接里面有选择网络接入点的选项,点击选择需要的4G网络接入点即可。4.移动4G有什么接入点,哪个快?移动4G一共只有两个接入点,分别是cmwap和cmnet。两个接入点4g速度相同。官方说法:前者是为手机上网而设立的,后者则主要是为电脑等

  • 有栈协程和无栈协程

    (更多文章参见个人专栏:www.2333.group)概述后台架构的微服务化,原先的单体应用被按照功能模块切分为若干进程组承担,此种架构演化带来的收益诸如:单进程复杂度降低,代码维护成本降低发布影响范围缩小,发布灵活性提升计算资源更精准的分配......但是这种架构带来的另外的变化就是,原先由单进程承载的事务,可能涉及几个甚至十几个进程;在这种情况下,采取异步回调的程序架构会导致代码零散不易维护;而采取多线程的话,一方面由于线程切换效率比较低,另一方面部分系统对线程个数的上限是有限制的,因此多线程的结构并不利于算力的充分利用。因此协程技术应运而生。所谓协程,即用户级线程,一种用于将异步代码同步化的编程机制,使得程序的执行流可以在多个并行事务之间切换但又不必承担切换带来的过高的性能损耗。当前很多的编程语言都内置协程特性或者有自己的协程库,如C/C++的libco、golang的goroutine等。而在实现机制上,又可以划分为有栈协程和无栈协程,我们分别进行介绍。有栈协程所谓有栈协程是指执行环境的恢复是通过函数栈(即运行时上下文)的恢复实现的,在此之前我们先回忆一下函数调用的基础知识。函

  • linux磁盘头数据损坏修复Oracle数据库

    本次模拟通过fdisk分区的磁盘头损坏,造成文件目录无法使用。如果是asm磁盘,可通过asm相关命令进行修复现有环境[root@pgtesttestdata]#df-hFilesystemSizeUsedAvailUse%Mountedon/dev/mapper/vg_firsouler-lv_root9.5G7.1G2.0G79%/tmpfs996M72K996M1%/dev/shm/dev/sda1477M42M410M10%/boot/dev/mapper/pgvg-lvpg19G4.4G14G25%/pgdata/dev/sdc15.8G12M5.5G1%/testdata[root@pgtesttestdata]#lsanalyze_new_cluster.shgp2020.cfglost+foundojdbc6.jar[root@pgtesttestdata]#复制破坏/dev/sdc1磁盘[root@pgtesttestdata]#cd/[root@pgtest/]#ddif=/dev/zeroof=/dev/sdc1bs=1024count=88+0recordsin8

  • JS闭包的9大经典使用场景

    作者:fly63 http://www.fly63.com/article/detial/99741.返回值(最常用) //1.返回值最常用的 functionfn(){ varname="hello"; returnfunction(){ returnname; } } varfnc=fn(); console.log(fnc())//hello 复制这个很好理解就是以闭包的形式将name返回。2.函数赋值varfn2; functionfn(){ varname="hello"; //将函数赋值给fn2 fn2=function(){ returnname; } } fn()//要先执行进行赋值, console.log(fn2())//执行输出fn2 复制在闭包里面给fn2函数设置值,闭包的形式把name属性记忆下来,执行会输出hello。3.函数参数functionfn(){ varname="hello"; returnfunctioncallback(){ returnname; } } varfn1=fn()//

  • 万物到家的万亿零售新蓝海

    生活中,在某种程度上“快”意味着取得先机,预示着赢。4G取代了3G、地铁淘汰了公交车、外卖打败了泡面,新一代消费者的生活标签里高效、便捷、优质永远排前,而这也是配送服务市场得以野蛮生长的原因。2019年9月20日,以“潮流邂逅科技”为主题的GIIS2019第三届零售创新峰会在北京举行。美团点评高级副总裁王莆中在《万物到家——从餐饮到零售》的主题演讲中,提出“外卖是服务业和零售业的交叉口”、“外卖推动餐饮行业的线上化率五年时间快速涨了10倍,这样的服务能够复制到其他零售的品类”等零售线上化观点。从表面来看,基于对外卖加速服务行业和零售行业发展的认同,美团推出了美团闪购服务意图做30分钟到家的LBS电商,帮助低渗透品类快速线上化。深度思索美团战略布局,美团做闪购或许还有更深层次的原因……到家服务显蓝海互联网的发展,给消费者的生活提供了多种可能。吃饭可以点外卖、买衣服可以网购、手机即是钱包,在零售线上化的过程下,消费者对服务提出了更高的要求:除了外卖到家、消费者还需要生鲜到家、药品到家、鲜花到家,生活用品一一到家,而且必须要快。显然,当下消费者越来越愿意为便利付费,庞大的用户需求也孕育出了到

  • python获取当前路径

    python获取当前执行命令的路径:#!/usr/bin/envpython #-*#coding:utf-8-*- importos printos.getcwd()复制python获取当前文件所在的路径:#!/usr/bin/envpython #-*#coding:utf-8-*- importsys printsys.path[0]复制假设我有一个文件为/usr/test.py,test.py里面的内容是:#!/usr/bin/envpython #-*#coding:utf-8-*- importos importsys printos.getcwd() printsys.path[0]复制我在/etc/中运行,那么命令是:[root@localhost/]#python/usr/test.py复制此时打印出来的结果是:os.getcwd()=/ sys.path[0]=/usr复制

  • 小程序云开发实现删除更新功能

    1:在页面上写上更新和删除的按钮 现在json里面引入vant组件{ "usingComponents":{ "van-button":"../../vant/button/index" } }复制在wxml里面填写删除更新按钮代码<van-buttontype="warning">更新</van-button> <van-buttontype="danger">删除</van-button>复制2:打开js用id:options.id把id先直接赋值过来,在页面加载的时候,页面里面就有了id,后续操作更加方便简单.onLoad:function(options){ //console.log(options) db.collection('books').doc(options.id).get({ success:res=>{ console.log(res.data) this.setData({ book:r

  • 关于JS的浮点数计算精度问题解决方案

    由于接触JS不久,关于JS的浮点数的计算更是之前没有用过,这次写JS项目发现的这个问题:0.1+0.2=0.3000000000004,为什么会出现这么奇怪的问题呢?在网上找了一些资料,JS作为解释性语言,直接计算会有浮点数精度丢失问题。门弱类型语言的JavaScript,从设计思想上就没有对浮点数有个严格的数据类型。解决方案: 一.有种最简单的解决方案,就是给出明确的精度要求,在返回值的过程中,计算机会自动四舍五入,比如:varnumA=0.1; varnumB=0.2; alert(parseFloat((numA+numB).toFixed(2))===0.3);复制用这种方法在测试过程中也有问题,例如6.8-0.4打印为6.3,本应为6.4所以这里转换结果还是不正确。 在浮点数计算的时候,很多时候产生的都是这种极限数据,如果要精确进行整数转换,要放大的倍数过大。这里我们可以用四舍五入对转换的过程进行优化:Math.round((6.8-0.9)*10);//四舍五入 59复制优化之后的自定义函数:Math.formatFloat=function(f,digit){ varm=

  • 求最大公约数

    /* 功能:求最大公约数 日期:2013-06-19 */ #include<stdio.h> #include<stdlib.h> intgcd(intm,intn); intmain(void) { intnum1,num2; printf("请输入两个数字:"); scanf("%d%d",&num1,&num2); printf("最大公约数为:%dn",gcd(num1,num2)); system("pause"); return0; } /************************************************************************ 函数名:gcd 功能:求最大公约数 参数:intm待求数num1 intn待求数num2 返回值:两值的最大公约数 ************************************************************************/ intg

  • Spring-boot特性(2) 原

    SpringApplication在使用Spring-boot时,永远要记住它仅仅是SpringFramework的延伸(或者说整合),其底层还是基于SpringFramework(core、contest、bean)。所以Spring该有的特性SpringBoot中都会存在。启动异常Spring在启动时需要初始化容器、向容器在注入类等等操作,如果在启动过程中发生任何异常,我们可以通过 FailureAnalyzers特性来获取异常启动的信息,结构如下:*************************** APPLICATIONFAILEDTOSTART *************************** Description: Embeddedservletcontainerfailedtostart.Port8080wasalreadyinuse. Action: Identifyandstoptheprocessthat'slisteningonport8080orconfigurethisapplicationtolistenonanotherport

  • 微信早报 | 微软第一款微信小程序正式发布;微信将管制「互骂群」;腾讯官方感谢 360

    微信互联网人每天必看的早新闻 小程序 1.6月10日,微软中国官方宣布,旗下首款小程序「微软小蜜」正式发布。小程序目前提供「传图识字」、「表格还原」、「智能创作」三个服务。 2.6月9日,首个区块链小程序「小协议」确认无法回归。「小协议」小程序上线不到两天即被暂停服务,之后开发者向微信提出申诉,很快得到了微信的反馈,微信表示区块链不属于服务类目。 3.美国轻奢品牌coach联合艺人许魏洲推出限量合作系列,微信小程序为该系列唯一销售渠道。 4.6月1日,宁陵县法院上线了「宁陵法院执行局」小程序。该小程序涵盖了案件查询、节点查询、失信曝光、执行悬赏、司法拍卖、诉讼保全等十多个功能版块。 5.6月10日,工商银行首款微信小程序「悦行越快乐」上线。该小程序支持同步微信步数,并用微信步数换取积分,积分可用于抽取无人机、美容仪等奖品。 6.6月8日,微信和广东省教育考试院联合宣布,全国首个高考查分微信小程序「广东省教育考试院」正式上线。广东考生可通过小程序直接查询分数。 7.「海盗来了」研发方豪腾嘉科CEO曹晓刚透露,「海盗来了」小游戏DAU峰值已达到4000万。 微信圈 1.6月8日,「微信安全

  • 【Java入门提高篇】Java集合类详解(一)

      今天来看看Java里的一个大家伙,那就是集合。  集合嘛,就跟它的名字那样,是一群人多势众的家伙,如果你学过高数,没错,就跟里面说的集合是一个概念,就是一堆对象的集合体。集合就是用来存放和管理其他类对象的地方,也可以叫做容器,你可以把它理解为仓库管家,当你有东西需要存放和管理的时候,就要记得来找它。你也许会说,不是有数组吗?确实,用数组存放一堆相同类型对象也是一个不错的选择,但是有一个很大的缺陷,那就是数组大小只能是固定的,不能从数组里动态添加和删除一个对象,要扩容的时候,就只能新建一个数组然后把原来的对象全部复制到新的数组里,而且只能存放相同类型的对象,使用起来不够灵活。然而我们的管家就不一样了。  国际惯例,先来看一个栗子:publicclassTest{ publicstaticvoidmain(Stringargs[]){ //小明打算学Java,买了三本书 BookbookA=newBook("Java核心技术(卷一)",88.9); BookbookB=newBook("Java核心技术(卷二)",88.6); BookbookC

  • 使用Docker快速搭建ELK日志分析平台

    为什么选择Docker?Docker是目前非常主流的容器化的虚拟技术,这个虚拟又与VMware或者是Hyper-v搭建的虚拟机不同,虚拟机是在宿主机的内核已经操作系统系统之上在虚拟出一套操作系统,而Docker这种容器化的技术是基于操作系统的namespace直接使用宿主机的操作系统去构建需要隔离的应用,中间省去了再去虚拟化一套操作系统的过程,或许有人会担心使用如果Docker的容器挂掉了之后,数据会丢失的问题,这你大可不必的过多担心,Docker本身实现了数据卷的工程,可以将容器内部的目录挂载到宿主机之上,只要你的宿主机还健康,那么上面的数据就不会丢失.甚至是当你重新创建一个容器之后你将新容器的数据目录也挂载到了之前容器的目录上,数据都可以复用,但我不建议你这样哦~ELK版本的选择主版本不用最新版,大版本不用老版,这是我选择版本的原则,根据这个原则我们打开DockerHub看一下哪一个版本符合我的要求. 可以看到最新版本是7.14,那么根据上面的选择版本的原则,我们直接pull7.13.0版本的ELK即可.安装docker-composeELK其实是三个开源软件的简称,E代表的是搜索

  • 腾讯云DDoS高防包添加DDoS防护的水印防护密钥api接口

    1.接口描述接口请求域名:antiddos.tencentcloudapi.com。 添加DDoS防护的水印防护密钥 默认接口请求频率限制:20次/秒。 APIExplorer提供了在线调用、签名验证、SDK代码生成和快速检索接口等能力。您可查看每次调用的请求内容和返回结果以及自动生成SDK调用示例。 2.输入参数以下请求参数列表仅列出了接口请求参数和部分公共参数,完整公共参数列表见公共请求参数。 参数名称 必选 类型 描述 Action 是 String 公共参数,本接口取值:CreateWaterPrintKey。 Version 是 String 公共参数,本接口取值:2020-03-09。 Region 否 String 公共参数,本接口不需要传递此参数。 InstanceId 是 String 资源实例ID 3.输出参数 参数名称 类型 描述 RequestId String 唯一请求ID,每次请求都会返回。定位问题时需要提供该次请求的RequestId。 4.示例示例1添加DDoS防护的水印防护密钥输入示例htt

  • 软件设计的哲学:第十八章 代码的可见性

    目录18.1使代码更简单的东西18.2使代码不那么明显的事情18.3结论 晦涩是2.3节中描述的复杂性的两个主要原因之一。当系统的重要信息对新开发人员来说不明显时,就会出现模糊现象。模糊问题的解决方案是用一种简单易解的方式来写代码。本章讨论了一些使代码或多或少变得简单的因素。 如果代码是简单易解的,这意味着某人可以快速地阅读代码,而不需要太多思考,并且他们对代码的行为或含义的第一次猜测将是正确的。如果代码是简单易解的,那么读者就不需要花费太多时间或精力来收集处理代码所需的所有信息。如果代码不是简单易解的,那么读者必须花费大量的时间和精力来理解它。这不仅降低了它们的效率,而且还增加了误解和错误的可能性。明显的代码比不明显的代码需要更少的注释。 “简单易解”是读者的想法:注意到别人的代码不简单易解比看到自己代码的问题更容易。因此,确定代码可见性的最佳方法是通过代码审查。如果有人读了你的代码,说它不明显,那么它就不明显,不管它在你看来多么清楚。通过尝试理解是什么使代码变得不明显,您将了解如何在将来编写更好的代码。 18.1使代码更简单的东西 在前几章中已经讨论了使代码简单易解的两个最重要的技

  • 计算机网络:PPP协议与HDLC协议

    文章目录PPP协议HDLC协议PPP协议PPP(Point-to-PointProtocol)是使用串行线路通信的面向字节的协议,该协议应用在直接连接两个结点的链路上。设计的目的主要是用来通过拨号或专线方式建立点对点连接发送数据,使其成为各种主机、网桥和路由器之间简单连接的一种共同的解决方案。PPP协议是在SLIP协议的基础上发展而来的,它既可以在异步线路上传输,又可在同步线路上使用;不仅用于Modem链路,也用于租用的路由器到路由器的线路。背景:SLIP主要完成数据报的传送,但没有寻址、数据检验、分组类型识别和数据压缩等功能,只能传送IP分组。如果上层不是IP协议,那么无法传输,并且此协议对一些高层应用也不支持,但实现比较简单。为了改进SLIP的缺点,于是制定了点对点协议(PPP)。PPP协议有三个组成部分:链路控制协议(LCP)。一种扩展链路控制协议,用于建立、配置、测试和管理数据链路。网络控制协议(NCP)。PPP协议允许同时采用多种网络层协议,每个不同的网络层协议要用一个相应的NCP来配置,为网络层协议建立和配置逻辑连接。一个将IP数据报封装到串行链路的方法。IP数据报在PPP

  • [转]Linux中python3.6+ipython+Jupyter Notebook环境

    python3.6安装 下载python安装包,这里下载的最新的3.6.1版本 https://www.python.org/ftp/python/3.6.1/ 将安装包上传到服务器并解压 tarzxvfPython-3.6.1.tgz 复制 安装python cdPython-3.6.1 ./configure--prefix=/usr/local/python-3.6.1#重要,指定python的安装路径,可以自己设置。 make sudomakeinstall 复制 修改python的软链接(建立软链接,变为全局) sudoln-s/usr/local/python-3.6.1/bin/python3.6/usr/bin/python 复制 查看python版本,发现已经改变 python     ipython安装 下载ipython,并上传到服务器 http://archive.ipython.org/release/6.0.0/ 解压 tar-zxvfipython-6.0.0.ta

  • CentOS7 yum设置阿里源

    1.备份 mv/etc/yum.repos.d/CentOS-Base.repo/etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentOS-Base.repo到/etc/yum.repos.d/ wget-O/etc/yum.repos.d/CentOS-Base.repohttps://mirrors.aliyun.com/repo/Centos-7.repo 3.重新生成缓存 yummakecache 为梦想不止不休!

  • 万能解决npm安装不上包

    进入flash-vue-admin目录 运行npminstall--registry=https://registry.npmmirror.com安装依赖 运行npmrundev启动项目     万能解决npm安装不上包: npmi--legacy-peer-deps复制

  • 三元环问题总结

    三元环问题总结 标签:知识点总结 阅读体验:https://zybuluo.com/Junlier/note/1322477 定义 就是三个点构成的环 无向图上求三元环 首先考虑暴力 枚举一条边,然后枚举其中一个点连出的所有边并把能连到的点都打上标记,再枚举另一个点能连到的所有的边,把打了标记的点数加进答案 显然算重,每个环被枚举到了三次,所以答案除以\(3\) 复杂度呢:\(O(m)\)枚举边,\(O(m)\)第一个点枚举边,\(O(m)\)第二个点枚举边,所以\(O(n^3)\) 考虑更优秀的做法 怎么优化上面的算法呢,我们把边有向化,每一条边从度数小的指向度数大的,如果度数相同则编号小的指向编号大的,再同样的用上面暴力的方法枚举 给出复杂度:\(O(m\sqrtm)\) 为什么复杂度降低了呢,首先还是枚举每条边是吧,然后对于度数小于\(\sqrtm\)的点,我们当然只用枚举\(\sqrtm\)条边;对于度数大于\(\sqrtm\),它枚举的边指向的点度数一定大于\(\sqrtm\)(连边方法),这样的点最多只有\(\sqrtm\)个对吧,那么总的复杂度不就是\(O(m\sq

  • 【Jquery】jquery刷新页面(局部及全页面刷新)

    局部刷新:这个方法就多了去了,常见的有以下几种;$.get方法,$.post方法,$.getJson方法,$.ajax方法如下前两种使用方法基本上一样$.get(”Default.php”,{id:”1″,page:“2″},function(data){//这里是回调方法。返回data数据。这里想怎么处理就怎么处理了。});$.getScript方法:$.getScript(”http://jqueryajax.com/jquery.js”,function(){$(”#go”).click(function(){//回调方法$(”.block”).animate({backgroundColor:‘pink’},1000).animate({backgroundColor:‘blue’},1000);});});$.getJson只是返回的数据类型不一样$.getJson(”Default.php”,{id:”1″,page:“2″},function(data){//注意,这里返回的JSON数据引用方法为”data.info”,不明白的可以查一下json方面的教程。这里就不解释太

相关推荐

推荐阅读