从零开发Electron-Vue (一)

 下个项目要用前端的web技术开发windows桌面应用，后端采用python技术，现在在做调研。

部署环境

1.安装node，成功后安装vue-cli。

npm install vue-cli

2.下载electron-vue项目。

注意：要使用电脑的cmd去下载，切记！

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

选项：

Use Sass / Scss?输入 no

Select which Vue plugins to install?选择 vue-electron

what build tool would you like to use? 选择builder

3.进入项目目录，安装依赖，需要等待1个小时左右。

npm install
npm install element-ui

4.下载依赖完成后，启动。

npm run dev

5.发现报错？

如果是：ReferenceError: process is not defined，在webpack.renderer.config.js 和 webpack.web.config.js中寻找 new HtmlWebpackPlugin()方法里的template:path...这行下边 添加如下代码

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

再次启动发现还是报错？

如果是：ReferenceError: htmlWebpackPlugin is not defined，将renderer index.ejs文件配置中得htmlWebpackPlugin修改为HtmlWebpackPlugin，

原理是与webpack.renderer.config.js的new HtmlWebpackPlugin()的名字保持一致。

6.再次启动，出现了vue的欢迎画面，恭喜你，成功了。

在main.js里添加

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

7.简单开发。

如果发现，element-ui里的例如table，el-tooltip不能使用。

解决办法：在webpack.renderer.config.js文件中whiteListedModules新增element-ui，加入白名单后就可以了。

下一篇将分享实际开发中的故事。。。