electron开发技术路线

  • electron-vue
  • element-ui
  • scss

【ui】
https://blog.csdn.net/u013816465/article/details/82709177
https://element.eleme.cn/#/zh-CN/component/layout
【editor】
http://ckeditor.com/
https://www.tiny.cloud/
【可视化】
echarts:
https://www.echartsjs.com/examples/zh/index.html#chart-type-candlestick
v-charts:
https://v-charts.js.org/#/line
【url】
electron 到 electron-vue的目录变化
https://www.jb51.net/article/149312.htm
【窗口】
多窗口
electron-vue-windows
https://github.com/hxkuc/electron-vue-windows
https://javascript.ctolib.com/hxkuc-electron-vue-windows.html

1. 开始

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

2. 使用element-ui

cnpm i element-ui -S

在src/renderer/main.js中修改如下：

import Vue from 'vue'
import axios from 'axios'
import ElementUI from 'element-ui';  // 新添加
import 'element-ui/lib/theme-chalk/index.css';  //新添加

import App from './App'
import router from './router'
import store from './store'
Vue.use(ElementUI);  // 新添加

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false

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

element-ui需要加入到白名单里面，需要修改.electron-vue/webpack.renderer.config.js

将：

let whiteListedModules = ['vue']
修改为：

let whiteListedModules = ['vue', 'element-ui']

问题解决

  1. process is not defined

    解决办法：.electron-vue/webpack.web.config.js 和.electron-vue/webpack.renderer.config.js中修改 
new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),

重启之后，就能正常显示