用typescript完成倒计时_利用vue+electron+typescript+koa搭建一个桌面应用

当前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就算是配置完成了。

启动之后：

https://www.zhihu.com/video/1078696619523981312