使用electron将vue项目改为桌面版

一、首先熟悉和掌握vue、node.js

        vue学习:  https://cn.vuejs.org/v2/guide/installation.html

        node.js学习:  https://www.runoob.com/nodejs/nodejs-tutorial.html

二、electron学习

        了解并会使用即可(达到这个程度非常简单，要掌握好这门技术还是需要深入学习的)

        electron官方文档:  https://www.electronjs.org/docs

三、创建vue项目

        (1) 安装node:

                node官方下载地址: https://nodejs.org/en/

        (2) 检查是否安装成功：

                命令行输入，node -v  npm -v  如果成功安装node会显示对应的版本号 

                

        (3) 全局安装vue-cli：

　　        npm install --global vue-cli

                

        (4) 如果安装太慢可以使用国内的淘宝镜像cnpm

                1.全局输入npm install -g cnpm –registry=https://registry.npm.taobao.org 安装即可

                

                2. 检查是否安装成功  cnpm -v                  

                

         (5) 创建vue项目： vue init webpack 项目名

                 

                

       (6) 进入项目目录  npm install 或 cnpm install 安装项目依赖

                  

       (7) 运行项目 npm run dev

                

        (8) 输入地址打开已经运行的vue项目

                

四、创建electron项目，建议直接从gitHub上拉下来一个快速启动的electron项目模板

        (1) 下载electron项目的快速启动模板:

                点击进入：https://github.com/electron/electron-quick-start

                找到Code点击下拉，如果已经安装Git可以直接输入                                                                          git clone https://github.com/electron/electron-quick-start.git  克隆到本地，也可以下载，选择Download ZIP进行下载解压

                

       (2)  安装electron项目依赖  npm install

                 

       (3)  运行electron项目  npm run start  或  electron .(注意最后有点儿)  运行成功后会弹出窗口

                

五、将vue项目改为桌面版

      (1)  打包已有的vue项目 进入vue项目目录 命令行输入  npm run build

                

       (2)  build成功后，找到生成的dist文件

                

       (3)  将 dist文件里的内容复制到electron快速启动模板项目中

                 

        (4)  输入命令  npm run start  或  electron .(注意最后有点儿)运行electorn项目即可(这是将之前web项目改为  桌面版的示例)

                

六、将electron项目打包为应用  .exe

        (1)  全局安装electron-packager   命令:  npm install electron-packager -g

                

        (2) 进入electron项目目录下，执行命令electron-packager .(注意最后有点儿) 完成打包

                

        (3) 打包完成后，在electron项目的目录下找到打包后的 .exe文件

                

             

使用electron将vue项目改为桌面版具体步骤就是这样，比较简单方便（这只是其中一种方法，后续还会更新另外一种方法，electron是很强大的，里面内容也挺多，推荐大家多学习学习，对于开发人员来说是有很大帮助的）。最近正在研究vue桌面版应用的跨域问题，前端学习这块儿本人也算刚入门吧，如果大家有vue和electron相关方面的问题可以相互讨论一下，我也会用我所学的知识尽量为大家解答的。