Electron 集成 Vue —— electron-vue

目录

1. 全局安装vue的脚手架

2. 下载electron-vue的项目模板

3. 指定依赖下载源

4. 下载项目依赖

5. 修改配置文件

6. 启动项目

---

 

1. 全局安装vue的脚手架

命令行中运行（若没有安装yarn，请自行安装yarn）

yarn global add @vue/cli-init

2. 下载electron-vue的项目模板

electron-vue-start为项目名，可自定义为任意名称

vue init simulatedgreg/electron-vue electron-vue-start

按提示下载（若使用默认值则按回车键，选用 vue plugins时，选择 vue-electron，其他选择是否时可以都选no）

3. 指定依赖下载源

在 electron-vue-start 文件夹中新建文件 .yarnrc，内容如下

registry "https://registry.npm.taobao.org"

sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

4. 下载项目依赖

yarn

5. 修改配置文件

在 .electron-vue\webpack.renderer.config.js  和 .electron-vue\webpack.web.config.js 的 plugins 中，新增以下代码（两个文件都要改！）

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

 具体位置如下图：

6. 启动项目

yarn dev

若项目启动成功，则会自动弹出下图