关于electron-vue用typescript改写遇到的几个坑

本文讲述了在使用electron-vue构建桌面应用时,将项目从JavaScript迁移到TypeScript并整合Vuex的过程中遇到的问题及解决方案。在改写过程中,涉及到全局声明文件设置、ts-loader的使用、webpack配置调整,以及组件中使用vue-property-decorator和vuex-class插件进行类型检查和状态管理。遇到的主要问题包括:组件必须继承Vue导致的Vue实例冲突,以及在使用vuex-electron时遇到的状态同步难题。
摘要由CSDN通过智能技术生成

一,前言
       最近在做一个用electron-vue重构的桌面应用,但是要用typescript代替js,并加入vuex,在前期准备阶段着实遇到了不少坑
二,关于坑
首先我的项目是基于electron-vue官配的脚手架生成的

npm install -g vue-cli                            //全局安装
vue init simulatedgreg/electron-vue my-project    //创建工程

在这里插入图片描述
如上图,项目目录结构基本没有改变

1,src目录下创建vue.sfc.d.ts全局声明文件:

// 配置ts读取.vue文件
declare module "*.vue"{
  import Vue from 'vue'
  export default Vue
}

2,ts改写依赖安装:

npm install typescript,ts-loader -D

ts-loader用于项目中解析.ts文件
.electron-vue目录下更新webpack关于ts解析的配置

//webpack.main.config.js & webpack.renderer.config.js
......

module: {
    rules: [
      {
        test: /\.ts$/,
        use: {
        loader: "ts-loader"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值