Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解

Electron + Vue + Vscode构建跨平台应用（一）知识点补充
Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建
Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目

  这篇我们将正式开始跨端之旅，首先开始构建Vue项目

1： 用 electron-vue 如何创建Vue项目

vue init simulatedgreg/electron-vue ele-vue-learning

  通过上述命令就可以创建一个electron-vue项目了，在输入上述命令之后，npm首先会下载对应的模板，这样就能保证项目产生的结构是一致的

模板下载完毕之后，还需要根据你项目进行一些额外的配置，如下图所示

  这些配置中我选用的是vue plugin是vue-electron，然后编译环境选用的是packager，
在完成这些配置后，你会看到后续的命令提示，他暗示了如果运行你的项目

2： 项目结构分析

我们将上述的项目导入到vscode当中，我们可以看到如下图所示的项目结构

  Electron-Vue构建Vue项目有两个进程，分别是主进程和渲染进程，

    主进程是指： 运行 package.json 里面 main 脚本的进程成为主进程。
    渲染进程是指： 每个 electron 的页面都运行着自己的进程，称为渲染进程。

  通俗的来讲主进程也就是 npm run start 出来的窗口，而窗口里面的内容，即是渲染进程。

   在我们创建的项目中src有两个文件夹，一个main文件夹，一个renderer文件夹，其分别对应这主进程和渲染进程；

  其他的文件夹的产生则是根据我们创建项目的配置模板帮我们自动创建的

3： 编译运行项目

  首先在项目跟目录执行如下命令，安装相关的依赖

npm install

  然后执行如下命令编译运行项目

npm run dev

项目运行效果如下