当前js能做的事越来越多,从普通的管理后台到h5,从小程序到RN,weex等移动端应用的实现,从前端到nodejs实现后端服务。它做了一切能涵盖的方面,当然,也不能放过桌面端应用。当前最流行的js桌面端开发框架莫过于nw.js和electron。这里我们就用electron来实现一个简单的桌面端小应用。
当前实现electron最成功的实例莫过于微软的vs code 了,前端的同学应该不会陌生,不过微软在实现性能上做了许多算法上的优化。这里,我们将使用vue-cli3来搭建一个electron,并加入typescript开发。使用typescript的目的主要是因为angular4使用后遗症,对于自动引入和类型检查特别爽,然后async和await的使用也特别舒服。
vue-cli3的安装,如果之前安装了vue-cli2的话需要先卸载2,然后重新安装:
npm uninstall -g vue/cli
npm install -g @vue/cli
安装完毕后,我们只需要建立一个electron-vue的项目即可:
vue init simulatedgreg/electron-vue electron-vue-typescript-koa
然后根据对应的选项选择你需要的配置即可
这边有个小问题,它自动生成的项目electron版本是1,安装是会找不到那个包,这边我们手动在package.json中将版本换为最新的,具体如下
"electron": "^3.0.3",
这样生成的项目npm install后就可以用npm dev跑起来了
不过我们需要集成typescript,首先需要你全局安装过typescript,没有安装的话就安装一下
npm insall -g typescript
然后就可以执行tsc来生成typescript的配置文件了
tsc --init
具体生成的tsconfig.json很多配置都被注释了,选择你需要的配置项即可,我这边的配置如下;
{
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"declaration": true, /* Generates corresponding '.d.ts' file. */
"sourceMap": true, /* Generates corresponding '.map' file. */
"importHelpers": true, /* Import emit helpers from 'tslib'. */
"strict": true, /* Enable all strict type-checking options. */
"noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
"noUnusedLocals": true, /* Report errors on unused locals. */
"noUnusedParameters": true, /* Report errors on unused parameters. */
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
"typeRoots": [
"./types",
"node_modules/@types"
], /* List of folders to include type definitions from. */
"types": [
// add node as an option
"node"
], /* Type declaration files to be included in compilation. */
"allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"dist",
"build"
]
}
配置文件准备好之后,需要引入ts-loader来编译ts文件,同时将入口文件之类全部改为.ts结尾:
这边要注意下,需要在 "include": [ "src/**/" ],根目录下加入一个 *.sfc.d.ts文件,作为类型文件,不然ts无法读取.vue的文件
declare
这边都改好之后,需要改一下webpack配置,需要在rules中加入对应的ts-loader,同时在resolve的extensions中加入扩展文件后缀 .ts:
rules
这样ts就算是配置完成了。
启动之后: