首页 IT技术内容详情

使用electron与vue搭建起步项目,并定制化窗口

2021-10-05 828 编程艺术家

话不多说,先上最终成果


第一步:安装node.js

首先确保你安装了node.js  没有安装的话去官网下载安装https://nodejs.org/zh-cn/  不推荐使用最新版本,因为有可能electron还不支持最新版的node.js,建议从8.0以上的版本开始


(注意:npm 命令被集成到了node.js里,安装node的时候已经自动将npm安装了。)




以往各个版本下载链接 https://nodejs.org/zh-cn/download/releases/


8.x版本,安装版下载链接 https://nodejs.org/dist/latest-v8.x/node-v8.15.0-x64.msi




安装完毕后,校验是否安装成功,使用:node -v  名称看下版本号,笔者这里用的8.10.0版本




第二步:cnpm安装

 由于在国内使用npm时会很慢,有些模块安装会涉及到国外网需要翻墙才行,导致安装失败!因此强烈推荐淘宝镜像的npm镜像


cnpm命令。 cnpm命令基本上和npm一模一样,只要用到npm的地方直接替换成cnpm就行。


全局安装cnpm,输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org


校验是否安装成功,查看版本号 cnpm -v




 


第三步:安装vue-cli

命令:cnpm install -g vue-cli


第四步:GitHub下载启动demo

GitHub上有一个开源的可以生成electron-vue项目的模板,下载该模板后通过命令可生成electron-vue项目


官网模板链接:https://github.com/SimulatedGREG/electron-vue


下载完毕后,进入到下载的文件根目录下,启动cmd命令行窗口。


输入命令:vue init simulatedgreg/electron-vue my-project  (注意:一个字母都不要改变,原命令粘贴就行)




输入完命令后回车,会有一些选项要自己填写,看下图(蓝色部分是笔者选择过的)




Application Name:项目名称


Application Id: 项目标识Id(一般使用公司网址)


Application Version :你的程序的版本号


Project description:项目描述


Use Sass / Scss :Yes


Select which Vue plugins to install:要安装的插件,默认是全选的,按空格键取消选择,前面尖括号里有*号表示选中状态


Use linting with ESLint? :是否使用ESLint插件做语法检查


Which ESLint config would you like to use?:如果使用上一步的ESLint,你希望用哪一种检查配置


 Set up unit testing with Karma + Mocha?:是否使用 Karma 和 Mocha集成测试模块


What build tool would you like to use?:你喜欢用哪一种打包方式


 author:作者名称


以上,在你选择完前一个选项后,下一个选项才会出现。最终会在该目录下出现一个 my-project文件夹,这个文件里就是一个融合了electron和Vue的demo起步案例,具体可以根据自己的需求改写。




进入my-project 文件夹,输入命令:cnpm install  按照项目的各种依赖模块






完事后,输入命令:cnpm run dev  来启动项目,大功告成!


另外,笔者红框圈起来的地方都可以定制,包括在windows下方的任务栏中的图标都可以定制






 


 


第五步:窗口定制

窗口定制的代码连接:https://github.com/pocher/vue-electron-demo





————————————————

版权声明:本文为CSDN博主「pocher」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/bingxuesiyang/article/details/87975915


相关标签: # vue

文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
 暂无评论,快来抢沙发吧~

发布评论