本文介绍了角CLI +电子开发环境搭建,分享给大家
用@angular/cli配合电子构建桌面软件开发环境,可以在电子中使用角的各种特性,使开发桌面软件像开发网站一样简单,快捷,而且可以模块化,紧跟最新技术趋势。
<>强安装角CLI和电子
首先使用npm安装角Cli:
美元npm i - g @angular/cli
然后安装电子
美元npm我- g电子
<>强创建项目
用角CLI创建一个新项目:
美元=scss ng新的项目名称——风格
$ cd项目名称
美元npm我
这里选择使用SCSS作为css预处理器。
<>强构建电子配置
安装本地电子依赖:
美元npm我- d电子electron-reload
electron-reload这个是电子的一个可以检测文件变化而实时刷新的包,在配置中配置这个每次文件更改后程序都会实时刷新。
电子是使用指数。js作为入口文件的,可以去网上看相关教程,下面我把我的索引。js文件贴出来供大家参考:
//index.js
const {
应用,//控制应用生命周期的模块。
BrowserWindow,//创建原生浏览器窗口的模块
}=要求(“电子”);
要求(“electron-reload”) (__dirname);//保持一个对于窗口对象的全局引用,不然,当JavaScript被GC,窗口会被自动地关闭
让胜利;
const createWindow=()=比;{//创建一个浏览器窗口。
赢得=new BrowserWindow ({
宽度:1200年,
身高:800,
框架:假的,
defaultFontSize: 16,
minWidth: 1200,
minHeight: 800,
图标:“文件://$ {__dirname}/dist/资产/程序”,
defaultMonospaceFontSize: 16,
defaultEncoding:“utf - 8”,
webPreferences: {
插件:真
}
}）;//加载应用的index . html
win.loadURL(“文件://$ {__dirname}/dist/index . html”);//打开开发工具
win.webContents.openDevTools ();//当窗口被关闭,这个事件会被发出
赢了。(“关闭”,()=比;赢得=null);
赢了。(“展示”,()=比;{
win.show ();
win.focus ();
}）
};//当电子完成了初始化并且准备创建浏览器窗口的时候这个方法就被调用
app.on(‘准备好’,createWindow);//当所有窗口被关闭时,退出程序
app.on (window-all-closed,()=比;{//在OS X上,通常用户在明确地按下Cmd + Q之前应用会保持活动状态
的过程。平台!==按锒摹?,app.quit ();
}）;
app.on(“激活”,()=比;{//>
ng建立美元,看真实的
电子。美元/
这样就可以将项目启动起来了,而且可以实时监测文件的变化刷新软件,很便捷。
<强>一些问题
现在软件基本可以跑起来了,但是在项目中只能使用Chrome API,电子和节点。js提供的API在项目中并不能使用,因为@angular/cli提供的会将这部分代码编译掉,程序就会报错,那怎么办呢?有以下几个方法:
<李>直接使用Webpack构建项目,Webpack在配置文件中提供了目标配置项,设置为electron-renderer就可以了。
<李>使用ng弹射弹出配置文件,然后在webpack.config。js中配置“目标”:“electron-renderer”,可以达到配置webpack的效果。
<李>还有最后一个笨办法,那就是在每个使用电子或节点。js API的文件中的顶部都使用打印稿的声明来声明,强制不编译要求方法如下,李
宣布全球{
界面窗口{
要求:任何;
}
}
const电子=window.require(“电子”);
之前
这三种方法都可以实现在@angular/cli创建的项目中使用电子或节点。js API,但都是略麻烦,希望项目自尽快放开目标的配置吧。
<强>小尾巴
下面是我最近正在用Angular4和电子构建的项目,还没开发完成,希望给新手参考一下,也希望大佬多多指点!
最近尝试着构建了几个小项目,发现框架之类的主要是使用上的差别,重要的还是在大型项目中的数据架构的处理,目前我在使用的数据架构主要有回来的和rxjs,各有千秋,将数据架构与框架结合起来才能实现清晰明了,简单易开发的项目,努力向这个方法加油。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
