Electron-vue脚手架改造vue项目的方法.docx

Electron-vue 脚手架改造 vue 项目的方法 Electron-vue 是一个基于 Vue 和 Electron 的脚手架，旨在帮助开发者快速将 Vue 项目打包成桌面应用。 Electron-vue 项目的核心是 Electron 框架，它允许开发者使用纯 JavaScript 调用丰富的原生 APIs，制造桌面应用。 Electron 框架的核心可以分成两个部分：主进程和渲染进程。主进程连接着操作系统和渲染进程，可以把它看作是页面和计算机沟通的桥梁。渲染进程就是我们所熟悉的前端环境，只是载体转变了，从浏览器变成了 window。 Electron-vue 项目的优点是可以快速将 Vue 项目打包成桌面应用，且不需要对 Vue 框架进行任何修改。 Electron-vue 项目的结构与 Vue 项目相同，都是使用 Vue-cli 脚手架进行搭建开发环境。 要将 Vue 项目改造成 Electron-vue 项目，需要按照以下步骤进行： 1.需要安装 Electron-vue 脚手架，并使用命令 `vue init simulatedgreg/electron-vue my-project` 初始化项目。 2.然后，将原项目的 src 目录下的文件拷贝到当前项目的 src/renderer 目录下。 3.接着，需要安装原项目中引用的工具包，如 element-ui stylus-loader stylus 等。 4.然后，需要在 `.electron-vue/webpack.renderer.config.js` 文件中配置原项目中 build/webpack.base.conf.js 文件中的参数。 5.需要在 `.electron-vue/webpack.renderer.config.js` 文件中配置 stylus 预编译的配置项，以便新项目能够正常编译 stylus。 需要注意的是，Electron 是基于 WebKit 内核的，对于 flex、box-sizing、filter 等属性需加上 `-webkit` 前缀。 Electron-vue 项目可以快速将 Vue 项目打包成桌面应用，且不需要对 Vue 框架进行任何修改。