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

一，前言
       最近在做一个用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",
        options: {
           appendTsSuffixTo: [/\.vue$/],
          }
        }
      },
......
 resolve: {
    extensions: ['.ts','.js', '.json', '.node'], 
  },
......

2,要注意:既然用到了ts,那么src目录下原有的js文件一般就全部改写成ts文件

*//src/renderer/main.ts*
import Vue from 'vue'
import iView from 'iView'
import 'iview/dist/styles/iview.css'
import App from './App.vue'
import router from './router'
import store  from './store'

declare var process: {
  env: {
    NODE_ENV: string,
    IS_WEB: boolean
  }
}

if (!process.env.IS_WEB) 
  Vue.use(require('vue-electron'))
  Vue.config.productionTip = false
  Vue.use(iView)

/* eslint-disable no-new */
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

*//src/main/index.ts*
import { app, BrowserWindow } from 'electron'
declare namespace global {
  let __static: string
}
if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}
......

其他原有js文件改写就不一一列出来了
这样webpack中引入的就不是xxx.js了,而是xxx.ts,都需要仔细改过来


三，重点:关于vue组件script部分的改写和vuex的引入
       既然用了ts，那么就用的彻底，vue组件中，我们完全可以用ts改写script的部分，这里用到了几个比较重要的插件，vue-property-decorator和vuex-class,关于它们的介绍和一些简单的使用可以百度或谷歌

npm install vue-property-decorator,vuex-class -S

//src/renderer/App.vue

       在我项目中的App.vue就加入了vue-property-decorator，它将组件改写成类，好了这里第一个大坑，就是 组件必须继承Vue,这个Vue又是从vue-property-decorator中引入的，我们必须在webpack.renderer.config.js配置一个东西:在whiteListedModules中多加一个vue-property-decorator的选项，否则每个组件都从vue-property-decorator引入一个Vue类，main.ts文件又import Vue from ‘vue’,之后webpack打包运行时会有多个vue的实例，Vue别名指向就不明确，vue组件无法识别已经注册好的[Vue warn]: $attrs is readonly…found in …"

//webpack.renderer.config.js
let whiteListedModules = ['vue','vue-property-decorator']

       我们加入vuex，又碰到了一个坑，脚手架项目默认帮我们在/store/index.ts中引入了vuex-electron插件，这个插件是用于多进程共享vuex数据的，其实一般情况下，我们用不到，就注释掉；如果不注释掉，在调用vuex-class的action异步改变store数据时，或者用原生的this.$store.disparch(‘xxx’)方法，都没法动态改变vuex的数据