从零开发Electron-Vue (一)

以你之姓@ 2022-10-29 01:46 130阅读 0赞

下个项目要用前端的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，加入白名单后就可以了。

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