博客

创建electron-vue项目

前提：已经安装了Node.js，并通过npm安装了vue-cli脚手架

vue init simulatedgreg/electron-vue [项目名]

electron-vue项目运行

1. 安装外部依赖

npm install

1. 解决插件问题(
   
   electron-vue ReferenceError process is not defined
   
   )

找到

.electron-vue

文件夹下

①webpack.renderer.config.js文件中


new HtmlWebpackPlugin({


……

}),

替换为

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: path.resolve(__dirname, '../src/index.ejs'),
    minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
    },
    templateParameters(compilation, assets, options) {
        return {
            compilation: compilation,
            webpack: compilation.getStats().toJson(),
            webpackConfig: compilation.options,
            htmlWebpackPlugin: {
                files: assets,
                options: options
            },
            process,
        };
    },
    nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
 }),

②webpack.web.config.js文件中


new HtmlWebpackPlugin({


……

}),

替换为

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
}),

导入element-ui

1. 安装element-ui

npm i element -S

1. 在 src/render/main.js 中引入element-ui

/* 导入element-ui */
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

导入Echarts

1. 安装echats

npm install echarts --save

1. 安装echats-gl

npm install echarts-gl --save

1. 在 src/render/main.js 中引入

/* 导入echarts与echarts-gl */
//import echarts from 'echarts'//echarts4或之前的版本导入用这个
import * as echarts from 'echarts' //echarts5导入
import 'echarts/theme/vintage.js' //导入皮肤(可选，不选则使用默认皮肤)
import 'echarts-gl'
Vue.prototype.$echarts = echarts

参考链接


electron-vue 集成 element-ui



electron-vue + element-ui构建桌面应用