electron-vue跨平台桌面应用开发实战教程（一）——项目搭建

    本文链接：

    Electron是一个基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。

    在开始搭建项目之前，需要安装以下工具

    1. node.js

    1.1 安装vue-cli

    先查看是否已经安装了vue-cli，vue-cli的版本是什么

    如果版本叫老，可以直接卸载，再安装最新版本

    卸载

    安装

    1. install @vue/cli -g

    1.2 使用vue-cli创建项目

    选取一个项目存放的路径，然后开始创建项目
    例如：

    1. vue create electron-vue-helloworld

    这里将项目名定为：electron-vue-helloworld
    输入完上述命令之后进入vue项目的创建过程。出现以下内容

    1. Vue CLI v3.8.4
    2. ? Please pick a preset: (Use arrow keys)
    3.   default (babel, eslint) 
    4. > Manually select features

    选择自定义安装，进入下一步选择

    这里我们选择

    1. Router（路由）
    2. Vuex（状态管理器）
    3. CSS Pre-processors（css预处理器）
    4. Linter / Formatter（代码风格、格式校验）

    然后进入下一步

    1. ? Use history mode for router? (Requires proper server setup for index fallback 
    2. in production) (Y/n)  n

    这一步是设置router是否使用history模式，这里我们选n，接着进入下一步

    1. ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
    3.   Sass/SCSS (with dart-sass) 
    4.   Sass/SCSS (with node-sass) 
    5.   Less 
    6. ❯ Stylus

    这里是设置css预处理模块，在这里我要强调一下，不需要乱选，选择我们熟悉的一种，在这里我们选择 Stylus ，然后进入下一步

    1. ? Pick a linter / formatter config: (Use arrow keys)
    2.   ESLint + Airbnb config 
    3. ❯ ESLint + Standard config 
    4.   ESLint + Prettier

    这一步是选择ESLint代码检查工具的配置，这里我们选择标准配置“ESLint + Standard config”，然后进入下一步

    2. > to invert selection)
    3. ❯◉ Lint on save
    4.  ◯ Lint and fix on commit

    这一步是选择什么时候执行ESLint检查，这里我们选择保存时检查“Lint on save”,然后进入下一步

    这一步是询问 babel, postcss, eslint这些配置是单独的配置文件还是放在package.json 文件中，这里我们选择“In package.json”，然后进入下一步

    1. ? Save this as a preset for future projects? (y/N) N

    这一步是询问时候以后创建项目是否也采用同样的配置，这里我们选N。到目前为止，vue项目是创建完成了，我们等待项目下载依赖包，等项目构建完毕我们开始集成electron

    1.3 使用electron-builder集成electron

    进入项目根目录（electron-vue-helloworld），然后执行下列命令：

    1. vue add electron-builder
    1. ? Choose Electron Version (Use arrow keys)
    2.   ^4.0.0 
    3.   ^5.0.0 
    4. ❯ ^6.0.0

    这一步是选择Electron的版本，我们这里选择最新版本6.0.0，等待安装完成即可。安装完成后会在src目录下生成background.js，并在package.json 文件中修main为”main”: “background.js”

    至此，所有的安装都已经完成了，接下来我们就可以运行程序看效果了。

    1.4 运行程序

    执行以下命令，运行程序

      在启动的时候，会启动很久，并出现以下信息

      这是在安装vuejs devtools，由于网络问题，一直安装不上。重试5次之后就会自动跳过并且启动程序。

      编译成功后，会自动弹出一个桌面程序，如下图所示

      下一期我们将详细的讲一下background.js，里边的一些参数都是干什么用的。

      更多内容请关注公众号
      在这里插入图片描述