男女直接做的视频上那个网站,qt做网站服务器,企业做网站营销的四大途径,中国最好的室内设计公司.现如今前端框架数不胜数#xff0c;尤其是angular、vue吸引一大批前端开发者#xff0c;在这个高新技术快速崛起的时代#xff0c;自然少不了各种框架的结合使用。接下来是介绍electronvue的结合使用。 2.Electron是什么#xff1f;#xff1f; 对于我来说Electron相当于… .现如今前端框架数不胜数尤其是angular、vue吸引一大批前端开发者在这个高新技术快速崛起的时代自然少不了各种框架的结合使用。接下来是介绍electronvue的结合使用。 2.Electron是什么 对于我来说Electron相当于一个浏览器的外壳可以把网页程序嵌入到壳里面可以运行在桌面上的一个程序可以把网页打包成一个在桌面运行的程序通俗来说就是软件比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象可以构建跨平台桌面程序本身支持node.js可以使用node.js的一些模块。想要深入了解可以查看官网的详细介绍。 Electron官网https://electronjs.org/ 3.Electronvue的联合使用 有vue基础跟nodejs基础的开发人员使用electron那就更顺风顺水了没有node基础的有vue或者angular基础的也可以学习学起来可能会吃力些不过也没关系很多东西有大神已经封装好了直接使用就行。 接下来教你手把手搭建一个electronvue的开发环境。 第一步安装nodejs windows下的NodeJS安装是比较方便的v0.6.0版本之后支持windows native只需要登陆官网http://nodejs.org/便可以看到下载页面。 2、下载完成后双击运行进行安装安装过程基本直接“NEXT”就可以了全部采用默认方式安装。windows的安装msi文件在过程中会直接添加path的系统变量变量值是你的安装路径例如“C:\Program Files\nodejs”。 3、安装完成后可以使用cmdwinr然后输入cmd进入 测试下是否安装成功。方法在cmd下输入node -v出现下图版本提示就是完成了NodeJS的安装。 4、npm的安装。由于新版的NodeJS已经集成了npm所以之前npm也一并安装好了。同样可以使用cmd命令行输入”npm -v”来测试是否成功安装。如下图出现版本提示便OK了。 5、常规NodeJS的搭建到现在为止已经完成了急不及待的话你可以在”cmd“输入”node“进入node开发模式下输入你的NodeJS第一句”hello world“ - 输入console.log(‘hello world’)。 第二步:搭建vue开发环境 1.安装淘宝npm镜像 由于在国内使用npm是非常慢的所以在这里我们推荐使用淘宝npm镜像使用 淘宝的cnpm命令管理工具可以代替默认的npm管理工具$ npm install -g cnpm --registryhttps://registry.npm.taobao.org 淘宝镜像安装成功之后我们就可以全局vue-cli脚手架输入命令cnpm install --global vue-cli 回车验证是否安装成功在命令输入vue出来vue的信息及说明安装成功 第三步搭建vue项目 使用命令创建项目一步步选择之后开始等等项目创建完成 $ vue init webpack demo 完成后如下 成功之后修改启动项打开democonfigindex.js,具体修改如下 执行命令出现如下效果说明项目已经运行成功 $ npm run dev执行生成命令 $ npm run build 注意 生成的时候一定要修改index.js 中的生成路径否则后面程序运行打包页面会显示空白找不到路径 出现如下效果 项目下回多出一个dist的文件夹里面就你打包好的东西 接下来一切操作都在dist文件夹目录下。 第四步安装Electron 执行命令 $ npm install electron安装成功后执行electron -v 查看一下是否安装成功 第五步创建主程序的入口main.js,及相关配置 package.json 在dist文件夹内创建main.js文件及package.json 文件 文件内容如下 main.js const {app, BrowserWindow} require(electron);//引入electron
let win;
let windowConfig {width:800,height:600
};//窗口配置程序运行窗口的大小
function createWindow(){win new BrowserWindow(windowConfig);//创建一个窗口win.loadURL(file://${__dirname}/index.html);//在窗口内要展示的内容index.html 就是打包生成的index.htmlwin.webContents.openDevTools(); //开启调试工具win.on(close,() {//回收BrowserWindow对象win null;});win.on(resize,() {win.reload();})
}
app.on(ready,createWindow);
app.on(window-all-closed,() {app.quit();
});
app.on(activate,() {if(win null){createWindow();}
});以上是最基本的代码更复杂的可以自行设计也可以看官方文档 package.json {name: demo,productName: 项目名称,author: 作者,version: 1.0.4,//版本号main: main.js,//主文件入口description: 项目描述,scripts: {pack: electron-builder --dir,dist: electron-builder,postinstall: electron-builder install-app-deps},build: {electronVersion: 1.8.4,win: {requestedExecutionLevel: highestAvailable,target: [{target: nsis,arch: [x64]}]},appId: demo,//程序idartifactName: demo-${version}-${arch}.${ext},nsis: {artifactName: demo-${version}-${arch}.${ext}},extraResources: [{from: ./static/xxxx/,//需要打包的静态资源to: app-server,//静态资源存放路径filter: [**/*//打包静态资源文件夹内的所有文件 如果没有静态资源要打包进去extraResources 这段代码去掉]}],publish: [{provider: generic,url: http://xxxxx/download///自动更新的安装包地址初步使用publish这段代码不需要}]},dependencies: {core-js: ^2.4.1,electron-packager: ^12.1.0,//不打包成exe程序可以去掉electron-updater: ^2.22.1,//不打包成exe程序可以去掉}
}package.json更多配置可查看官方文档https://www.electron.build/configuration/configuration 现在万事俱备只欠东风 执行命令 electron . 成功后效果如下 出现如上效果说明你已经成功了。 第五步打包成软件包 执行命令 $ npm install electron-builder$ npm install electron-package 执行打包命令 electron-bulider 以上就是打包成功的效果demo-1.0.4.exe 就是一个软件包可以直接安装到系统上不同的操作系统可以打包成不同的安装包。 vue有一个集成的electron的项目 electron-vue , 现成项目已经发布到githup上 githup地址https://github.com/2577662935/electron-vue.git 文档访问地址https://github.com/2577662935/electron-vue/tree/master/my-project 如果调试一个程序让你很苦恼千万不要放弃成功永远在拐角之后除非你走到拐角否则你永远不知道你离他多远所以请记住坚持不懈直到成功。 转载于:https://www.cnblogs.com/jiangxifanzhouyudu/p/9517651.html
