LittleC
技术学习记录
技术交流学习
在electron-vue上添加Typescript

背景

上一篇文章中虽然开了个头,但在build的时候发现了许多问题,比如打包出来的node_modules特别大,经过asar e检查,发现把整个项目的node_modules都打包了进去

https://github.com/electron-react-boilerplate/examples/ 仓库看到了electron-react-boilerplate自带typescript模板,虽然也是年久失修,试了一下,发现连安装都不行,不知道是什么问题,可能是权限?哪天有空的时候可以没空拿Linux试试

步骤

在阅读README.md之后,跑起项目,一看package.json,"electron": "^2.0.4",
https://github.com/SimulatedGREG/electron-vue/blob/45a3e224e7bb8fc71909021ccfdcfec0f461f634/template/package.json#L98

这是非常旧的一个版本了,在yarn add electron@7.1.8 -D之后,升级版本看到如下错误,谷歌一下就能找到相应解决方案

经过改动,终于把Hello World窗口能跑出来了

加入Typescript

经过了解,发现主要有vue-class-componentvue-property-decorator两种方法能比较舒服的使用Typescript

根据想象力和经验和谷歌,先yarn add tslint-loader tslint typescript ts-loader -D,打开.electron-vue/webpack.renderer.config.js,找到webpack的rules,添加如下内容
不知道是不是这些内容了,搜了好久拼拼凑凑出来的,有问题联系我

{
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          {
            loader: "ts-loader",
            options: { appendTsxSuffixTo: [/\.vue$/] }
          },
          {
            loader: 'tslint-loader'
          }
        ]
      },

根据官网的文档添加tsconfig.json

修改代码,即可正常渲染

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'

  @Component({})
  export default class LandingPage extends Vue{
    mounted(){
      console.log('hello world')
    }
  }
</script>

一个奇怪的问题

瞎搞使用过程中,发现this.$route没法正常获取,也没办法正常push(TypeError: Cannot read property 'push' of undefined),谷歌没有找到合适的解决方案,通过console.log发现,当前实例的$parent对象有正常的$route$router对象

于是我选择的解决方案是下次使用的时候直接暴力this.$parent.$router.push(path),如果this.$parent没有就 this.$parent.$parent,我甚至还能写段Code自动找(stackoverflow警告)

let nowLevel: any = this.$parent
while(!('$route' in nowLevel)){
  nowLevel = nowLevel.$parent
}
console.log(nowLevel)

引入Component的问题

这可能是options: { appendTsxSuffixTo: [/.vue$/] }导致的问题

由于 TypeScript 默认并不支持 *.vue 后缀的文件,所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件,放在项目项目对应使用目录下,例如 src/vue-shim.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

意思是告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理。

而在代码中导入 *.vue 文件的时候,需要写上 .vue 后缀。原因还是因为 TypeScript 默认只识别 *.ts 文件,不识别 *.vue 文件:

import Test from 'test.vue'

下一篇可能会写怎么做自动更新,也有可能咕咕

发表评论

textsms
account_circle
email

技术交流学习

在electron-vue上添加Typescript
背景 上一篇文章中虽然开了个头,但在build的时候发现了许多问题,比如打包出来的node_modules特别大,经过asar e检查,发现把整个项目的node_modules都打包了进去 在 https://gith…
扫描二维码继续阅读
2020-01-27