electron-vue 加入 TS

前言

首先我的项目是基于electron-vue官配的脚手架生成的

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

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

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

ts改写依赖安装:

npm install typescript -d
npm install 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'], 
  },
......

既然用到了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部分的改写

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

//src/renderer/App.vue
<template>
  <div id="app">
    <TabBar/>
    <router-view></router-view>
  </div>
</template>

<script lang='ts'> 
  import {Vue,Component} from 'vue-property-decorator'
  import TabBar from './components/tabBar.vue'       //窗口条
  @Component({
    components:{
      "TabBar":TabBar
    }
  })
  export default class App extends Vue{
    created(){
    }
  }
</script>

我们必须在webpack.renderer.config.js配置一个东西:在whiteListedModules中多加一个vue-property-decorator的选项

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

tsc --init 生成tsconfig.json

"strict": false,
"experimentalDecorators":true,