使用模板搭建electron_edgeJS_vue_typescript

前言

使用模板搭建 electron与edgeJS与vue与typescript

使用模板搭建electron_edgeJS_vue_typescript

1. 安装@vue/cli与@vue/cli-init

npm install -g @vue/cli;
npm install -g @vue/cli-init

2. 创建项目

vue init simulatedgreg/electron-vue my-project
根据需要选择
运行效果:

出现错误:

解决方法:
在webpack.renderer.config.js添加

      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      }

重新执行命令
运行效果：

3. 安装electron-edge-js

npm install electron-edge-js

4. 安装typescript

npm install typescript
npm install ts-loader

5. 配置typescript与vue

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

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

②更新webpack,用于解析ts-loader

webpack.web.config.js与webpack.renderer.config.js
在rules添加下面所示

      {
        test: /\.ts$/,
        use: {
          loader: "ts-loader",
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }
      }

extensions 添加’.ts’,如下所示

extensions: ['.js', '.ts','.vue', '.json', '.css', '.node', '.ts']

webpack.main.config.js

      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          transpileOnly: true,
        }
      }

③把src下面的js文件改成ts
别忘了把webpack里匹配的路径改为ts，如：

原来:path.join(__dirname, '../src/main/index.js')
改后:path.join(__dirname, '../src/main/index.ts')

dev-runner.js里的这个不要改

  var args = [
    '--inspect=5858',
    path.join(__dirname, '../dist/electron/main.js')
  ]

改后会发现几处错误:
在renderer/main.ts

import App from './App'
Vue.http = Vue.prototype.$http = axios

需改为:

import App from './App.vue'
Vue['http'] = Vue.prototype.$http = axios

在main.index.ts
加上

declare namespace global {
  let __static: string
}

6. 运行