我们点击 npm run dev 的时候，这就是启动 Vue 工程项目，那么它启动过程是什么样的呢？ Vue 项目启动过程，本文简要介绍。
在执行 npm run dev 的时候，会在当前目录中寻找 package.json 文件，包含项目的 名称版本 、 项目依赖 等相关信息。
从下图中可以看到， 启动 npm run dev 命令后，会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。
webpack.dev.conf.js 中引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件。
可以看到，在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置，默认启动端口是 8080 ，这里可以进行修改。
index.html 的内容很简单，主要是提供一个 div 给 vue 挂载。
main.js 中， 引入了 vue 、 App 和 router 模块， 创建了一个 Vue 对象，并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下， 并绑定了一个路由配置。
上面 main.js 把 App.vue 模板的内容，放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到，这个页面的内容由一个 logo 和一个待放置内容的 router-view ， router-view 的内容将由 router 配置决定。
查看 route 目录下的 index.js ，我们发现这里配置了一个路由， 在访问路径 / 的时候， 会把 HelloWorld 模板的内容放置到上面的 router-view 中。
HelloWorld 中主要是一些 Vue 介绍显示内容。
所以，页面关系组成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。
到这，我们开始安装 router 、 vuex 。
Ctrl+C 退出启动，继续执行 vue-cli ，脚手架安装插件 router 和 vuex 开始。
输入一个大写Y，按下Enter
vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
Vuex 主要有五部分：
① 安装 vuex
接下来我们在 src目录 下创建一个 vuex 文件夹
并在 vuex文件夹 下创建一个 store.js 文件
文件夹目录 长得是这个样子
在保证我们处于我们项目下，在命令行输入下面命令，然后，安装 vuex 。
② vuex 的关系图
③ 开始使用，在 mian.js 中，引入 vuex
④然后告知 vue 开始使用 vuex (Vue.use(Vuex))
在 store.js 文件中，引入 vuex 并且使用 vuex ，这里注意我的变量名是大写 Vue 和 Vuex
⑤接下来，在main.js中引入store
到这里算是，以及完成了。
我们再重新看一下此时的项目结构，多了router.js和store.js，其它相关的文件也被修改
一，打开子进程窗口；首先自己写好自己的vue页面，我这里写好的页面的名字是 zchildern；然后把页面引入路由里面，把路由的模式改成哈希模式1，在要触发的vue页面事件中这样写：const ipc = require('electron').ipcRendereripc.send('add')2，在background.js中接受触发的事件；首先引入 ipcMain；接收：（图下面是代码）const path = require('path')const url = require('url')const winURL = process.env.NODE_ENV === 'development'? 'http://192.168.2.184:3000': `file://${__dirname}/index.html`// 上边这段代码主要是用来解决vue路由访问页面的问题，端口号是vue启动的默认端口号，如果有需要可以自行修改ipcMain.on('add',()=>{let newwin = new BrowserWindow({width: 350,maxWidth:350, //配置窗口的最大尺寸minWidth:350, //配置窗口的最小尺寸height: 500,maxHeight:500,frame:false,modal: true, //配置子窗口是模态窗口movable:false,//窗口能否可以被移动；true or false，默认值为 trueparent: win, //win是主窗口webPreferences: {nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,webSecurity: false, // 是否禁用浏览器的跨域安全特性}})newwin.loadURL(winURL + '#/zchildren')// newwin.loadURL(path.join('file:',__dirname,'zchildren'))//new.html是新开窗口的渲染进程newwin.on('closed',()=>{newwin = null})})
