实战：使用electron-vue + yarn 创建桌面应用程序

electron简介：

官网：https://www.electronjs.org/
更多内容：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

项目创建和普通的vue项目一样，使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue your-project

一路回车，项目就建好了
建好的项目结构：

管理依赖请使用yarn！！！！
来一开始我用的是npm，结果到打包的时候一直失败。百度了一下很多人都遇到了同样的问题。

yarn的安装：
方法1
官网连接：https://classic.yarnpkg.com/zh-Hans/docs/install#windows-stable

下载安装即可，环境变量会自动添加

方法2
npm install yarn -g

安装完成后，记得设置淘宝镜像（有梯子最好）
yarn config set registry https://registry.npm.taobao.org/

在项目里执行命令时，我遇到了这样的报错 yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。 + yarn install

解决方法：
Emmm还是得使用管理员身份打开cmd
npm install -g yarn

然后项目里执行依然报错：
yarn : 无法加载文件 C:\Program Files\nodejs\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micros
oft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies

解决方法：
依然使用管理员身份打开cmd
执行set-ExecutionPolicy RemoteSigned

yarn可以使用后，输入命令yarn或yarn install安装项目需要的依赖

安装完成后，使用命令yarn run dev就可以运行了

初次运行时可能会遇到这样的报错

解决方法：https://github.com/SimulatedGREG/electron-vue/issues/871
在.electron-vue下的webpack.renderer.config.js和webpack.web.config.js中添加

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

再次运行可以看到实例了



打包：
打包命令yarn run build
最开始使用npm作为依赖管理，劈里啪啦报错。如果你也遇到同样的问题，请使用官方推荐的yarn作为依赖管理工具
附上比较全面的electron打包踩坑总结：https://segmentfault.com/a/1190000018533945?utm_source=tag-newest
打包结果

在开发过程中遇到不少问题
->Vue+Electron下vuex的commit/dispatch没有效果：
https://blog.csdn.net/weixin_30532759/article/details/94877480