electron+vite项目【1】

最新推荐文章于 2024-08-22 08:40:23 发布

THALLOW

最新推荐文章于 2024-08-22 08:40:23 发布

阅读量879

点赞数

文章标签： electron javascript vue.js

本文链接：https://blog.csdn.net/qq_36393991/article/details/128797359

版权

vite创建electron项目

主要是借鉴了以下资料：
小满Vue3第三十九章（Vue开发桌面程序Electron）
https://blog.csdn.net/qq1195566313/article/details/126063804?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167504365116782428646668%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167504365116782428646668&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_blogfirst_rank_ecpm_v1~rank_v31_ecpm-1-126063804-null-null.blog_rank_default&utm_term=electron&spm=1018.2226.3001.4450

变化点

项目上的一些不同：

使用js而不是ts ，原项目代码复用；

vite.config.js配置

// An highlighted block
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'  //手动安装 npm  install vite-plugin-electron -D
import electronRender from 'vite-plugin-electron-renderer' //手动安装 npm  vite-plugin-electron-renderer -D
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),  electron({
    entry: 'electron/index.js',
  }),electronRender()]
})

package.json配置

{
  "name": "vite_electron",
  "private": true,
  "version": "0.0.0",
  "main": "dist-electron/index.js",
  "scripts": {
    "dev": "chcp 65001 && cross-env SET_ISPACKAGE=false  vite",
    "build": "vite build  &&  electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "cross-env": "^7.0.3",
    "electron-is-dev": "^2.0.0",
    "electron-store": "^8.1.0",
    "electron-updater": "^5.3.0",
    "exec-mathexpress": "^1.0.15",
    "modbus-serial": "^8.0.9",
    "os-utils": "^0.0.14",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "electron": "^22.0.0",
    "electron-builder": "^23.6.0",
    "multispinner": "^0.2.1",
    "vite": "^4.0.0",
    "vite-plugin-electron": "^0.11.1",
    "vite-plugin-electron-renderer": "^0.11.3"
  },
  "build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": true,
    "copyright": "Copyright © 2022 electron",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist/**/*",
      "electron/**/*",
      "dist-electron/**/*"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://10.86.4.129:9000/electron-update"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具体内容"
    }
  }
}

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash