安装electron-vue遇到的问题

1.执行`vue init simulatedgreg/electron-vue xxx(project)`命令太慢。

推荐解决方法：

1.1、将electron-vue项目先下载下来

electron-vue国内码云地址，直接下载到本地。
或通过git直接克隆到本地 git clone https://gitee.com/mirrors/electron-vue.git

1.2安装样板代码

F:\privateProjects\workspace\project\Elc\ele-vue\electron-vue 是下载下来后的项目路径(根据自己下载的位置自行调整），my-project 是项目名称。
之后根据如下代码，即可快速构建项目模板。

vue init F:\privateProjects\workspace\project\Elc\ele-vue\electron-vue my-project

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kEzBwVb4-1609745352171)(C:\Users\12461\AppData\Roaming\Typora\typora-user-images\image-20210104101414846.png)]$

1.3运行项目

npm install

npm run dev

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cIctOdsw-1609745352174)(C:\Users\12461\AppData\Roaming\Typora\typora-user-images\image-20210104105936807.png)]$

2.运行npm run dev 报错

Electron-vue运行时报错“ReferenceError:process is not defined”

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gx7SdWFp-1609745352176)(C:\Users\12461\AppData\Roaming\Typora\typora-user-images\image-20210104110250956.png)]$

解决方案:
修改.electron-vue/webpack.web.config.js和.electron-vue/webpack.renderer.config.js文件的HtmlWebpackPlugin，添加templateParameters，如下：

扫描二维码关注公众号，回复： 12912066 查看本文章

plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
    
    filename: 'styles.css'}),
    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: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],

然后重新npm run dev 就可以了

3.如何集成 Element ui

3.1安装： npm i element-ui -S

3.2 在main.js中添加

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

3.3 在main.js中添加

<template>
  <div id="app">
    <router-view></router-view>
    <el-button type="info">信息按钮</el-button>
  </div>
</template>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ulWuYTV4-1609745352186)(C:\Users\12461\AppData\Roaming\Typora\typora-user-images\image-20210104113718603.png)]$

4. DevTools was disconnected from the page Once page id reloaded,DevTools will

在这里插入图片描述

未完待续…