Electron with Vue 框架搭建及打印功能分享

Electron with Vue 框架搭建及打印功能分享


2019.09.27
文档有改进地方,欢迎提出。

安装


  1. 准备工作:确保本机已经安装了nodejs && npm

  2. 检查本地是否已经安装了vue:npm view vue version;否则先安装vue:npm install vue

  3. 创建一个electron-vue的demo项目:vue create electron-vue-demo

  4. 安装配置:

    ? Please pick a preset:
      default (babel, eslint)
    > Manually select features
    
    ? Check the features needed for your project:
     (*) Babel
     ( ) TypeScript
     ( ) Progressive Web App (PWA) Support
     (*) Router
     (*) Vuex
    >(*) CSS Pre-processors
     (*) Linter / Formatter
     ( ) Unit Testing
     ( ) E2E Testing
    
    Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
    
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
      Sass/SCSS (with dart-sass)
      Sass/SCSS (with node-sass)
    > Less
      Stylus
    
    ? Pick a linter / formatter config: (Use arrow keys)
    > ESLint with error prevention only
      ESLint + Airbnb config
      ESLint + Standard config
      ESLint + Prettier
    
    ? Pick a linter / formatter config: (Use arrow keys)
    > ESLint with error prevention only
      ESLint + Airbnb config
      ESLint + Standard config
      ESLint + Prettier
    
    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >(*) Lint on save
     ( ) Lint and fix on commit (requires Git)
    
    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
    > In dedicated config files
      In package.json
    
    Save this as a preset for future projects? (y/N) N
    

    此处安装过程需要大约2分钟(视网络决定)

  5. 进入项目目录:cd electron-vue-demo

  6. 启动 Vue.js App 项目:npm run serve,打开浏览器登入:http://localhost:8080/

  7. 安装electron构建包:vue add electron-builder

    使用打印机必须要使用electron 3.0或以下版本,此处先任意选择安装,后续单独更换electron版本。

    npm uninstall electron && npm install electron@3.1.13 --save-dev

    ? Choose Electron Version (Use arrow keys)
      ^4.0.0
      ^5.0.0
    > ^6.0.0
    

    electron包文件较大,此处安装过程耗时较长,建议使用淘宝镜像cnpm安装。

  8. 由于electron将版本的问题,./src/background.js中有一处需要更改配置,否则启动不了electron。

    //删除第15行: 
    // protocol.registerSchemesAsPrivileged([{scheme: 'app', privileges: { secure: true, standard: true } }])
    //新增一行:
    protocol.registerStandardSchemes(['app'], {
          secure: true })
    
  9. 启动electron项目:npm run electron:serve
    在这里插入图片描述

  10. 默认配置了热加载,代码保存后,electron窗口会体现最新效果。

搭建框架


  1. 安装axios:npm install axios --save-dev

  2. 封装数据请求方法:

    新建文件夹:./src/axios/

    新建文件并粘贴代码:

    api.js

    import requestAll from "./request"; //引用fetch,js
    
    import apiHeader from './url'; //引用url.js
    
    // 数据请求
    
    export function Axios(method, api, params = {
         }) {
          
      let header = '';
      header = apiHeader.server;
      // 浏览器访问
      if( !window.require ) {
         
        header = '/api';
      }
      // electron访问
      return requestAll.Request(header+api, params, method)
    }
    

    request.js

    import axios from 'axios';//引入axios
    
    // post请求
    function Request(url, data = {
         }, method = 'post') {
         
      return new Promise((resolve, reject) => {
         
        axios({
         
          url: url,
          method: method,
          headers: {
         
            'Content-Type': 'application/json'
          },
          timeout: 30 * 1000, // 30秒超时
          data: data
        })
          .then(res => {
         
            // 统一错误状态码
            let errorMessage = 
### 创建 Vue3Electron 的项目结构及初始配置 #### 项目初始化 为了启动新的 Vue3Electron 项目,在终端中执行以下命令以创建基础环境: ```bash mkdir electron-vue3-app cd electron-vue3-app npm init -y ``` 这一步骤建立了项目的根目录并生成了一个 `package.json` 文件,用于管理依赖项和其他元数据[^1]。 #### 安装 Vue CLI 并创建 Vue3 工程 通过 Vue CLI 可以快速建立基于 Vue3 的前端框架。运行如下指令完成安装与项目构建: ```bash npm install -g @vue/cli vue create . ``` 在交互过程中可以选择预设或手动挑选特性来定制化新应用,确保选择了 Vue 3 版本支持[^3]。 #### 添加 Electron 支持 对于集成 Electron 到现有 Vue3 项目里,推荐采用 `electron-forge` 脚手架工具简化流程。按照下面的操作引入必要的开发资源: ```bash npx create-electron-app . --template=vue ``` 此操作不仅集成了 Electron 功能还自动调整了部分 Webpack 配置以便更好地兼容两者之间的协作[^4]。 #### 修改 package.json 中的脚本 为了让项目能够顺利编译和打包成桌面应用程序,需编辑 `package.json` 增加特定于 Electron 构建过程的相关命令: ```json { ... "main": "./src/main.js", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "electron:build": "vue-cli-service electron:build", "electron:serve": "vue-cli-service electron:serve" }, ... } ``` 上述设置允许开发者分别测试网页版和服务端渲染版本的应用程序,同时也提供了生产环境下的一键式发布方案[^5]。 #### 目录结构调整优化 最后建议整理好工作区内的文件布局,使之更符合实际需求。典型的项目结构可能看起来像这样: ``` electron-vue3-app/ ├── node_modules/ # NPM packages ├── public/ # Static assets (e.g., favicon.ico) ├── src/ │ ├── main.js # Entry point for the app&#39;s backend logic with Electron │ └── App.vue # Root component of your frontend application built on Vue3 └── package.json # Project metadata and dependencies definition file ``` 这种安排有助于保持代码整洁有序,并便于后续维护和发展[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值