electron-vue和element-ui快速开始

安装electron-vue

安装 vue-cli 和 脚手架样板代码

# 旧版
npm install -g vue-cli # 如果你已经安装忽略此处

# 新版

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

vue init simulatedgreg/electron-vue my-project

安装依赖并运行你的程序

cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

yarn之后可能会报错，使用管理员身份执行以下命令解决：

npm install --global --production windows-build-tools

运行之后electron报错，按照网上的解决方案如下：

在.electron-vue/webpack.renderer.config.js和.electron-vue/webpack.web.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,
    };
},

安装element-ui

npm i element-ui -S

在/my-project/src/renderer/main.js 中引入 element-ui

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