学习electron

一、electron介绍

使用HTML、CSS和JS构建跨平台的桌面应用程序

官网https://www.electronjs.org/

二、安装

node开发环境

$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运行应用
$ npm start

这就可以尝尝鲜了!

但是平时开发用的是vue，那怎么用vue来开发electron呢？

度娘说：‘用electron-vue’

接下来安装electron-vue 文档

# 如果你没有vue-cli的话需要全局安装
npm install -g @vue/cli
# 然后使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue my-project
# what? init ? 这个版本没有这个东西啊 
# 要继续使用init，需要安装一个桥接工具
npm install -g @vue/cli-init
# 继续安装
vue init simulatedgreg/electron-vue my-project
# 安装依赖
cd my-project
yarn # or npm install
# 进入开发模式
yarn run dev # or npm run dev

跑是跑起来了，但是页面报错啊

DANGER

process is not defined

参考资料

.electron-vue\webpack.renderer.config.js修改如下

new HtmlWebpackPlugin({
      filename: 'index.html',
      process: process, // 加这行
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

src\index.ejs修改如下

    // 这个if条件改一下
   <% if (!htmlWebpackPlugin.options.process.browser) { %>
      <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
      </script>
    <% } %>

ok,重新跑一下， 界面成功出来啦。