网站对企业的重要性网络网页设计制作公司
1. 初始化项目
在命令行中运行以下命令
npm create @quick-start/electron@latest
也可以通过附加命令行选项直接指定项目名称和你想要使用的模版。例如，要构建一个 Electron + Vue 项目，运行:
# npm 7+，需要添加额外的 --：
npm create @quick-start/electron@latest my-app -- --template vue
目前支持的模版预设如下
| JavaScript | TypeScript |
|---|---|
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| svelte | svelte-ts |
| solid | solid-ts |
2. 按提示选择需要的配置
下面是我的选择，可以根据自己的需求进行选择
| Project name | 项目名称，自定义输入 |
|---|---|
| Select a framework | 选择框架，vanilla, vue, react, svelte, solid可选择，演示这里我们选择vue |
| Add TypeScript | 是否添加TypeScript，演示这里我们选择no |
| Add Electron updater plugin | 是否添加Electron更新插件，yes |
| Enable Electron download mirror proxy | 镜像下载代理，国内网络建议开启，yes |
3. 进入项目目录，安装依赖
进入目录
cd electron-app
安装依赖
npm install
4. 启动项目
npm run dev
出现下面应用窗口说明项目启动成功
5. 目录结构
├── .vscode //vscode配置文件（可以不管）
├── build // 编译过程输出文件目录
├── dist // 打包后输出目录
├── node_modules // 依赖模块
├── out //编译过程输出文件目录
├── resources // 公共资源文件，主进程使用
│ └── icon.png //默认图标
├──src
│ ├── main // 主进程开发目录
│ │ └── index.js //主进程入口文件
│ ├── preload // 预加载脚本开发目录
│ │ └── index.js // 预加载默认脚本
│ └── renderer // 渲染进程开发目录，类似纯web项目根目录
│ ├── src
│ │ ├── assets //资源文件目录
│ │ ├── components //组件目录
│ │ ├── App.vue // 入口页面
│ │ └── main.js // 入口文件
│ └── index.js.html // 默认html文件
├── .editorconfig
├── .eslintignore //eslint代码检查忽略配置文件
├── .eslintrc.cjs //eslint代码检查配置文件
├── .gitignore //git忽略配置文件
├── .npmrc // npm源配置文件
├── .prettierignore //prettier代码格式化忽略配置文件
├── .prettierrc.yaml //prettier代码格式化配置文件
├── dev-app-update.yml
├── electron-builder.yml //打包配置文件
├──electron.vite.config.mjs //electron-vite配置文件
├── package-lock.json
├── package.json
└──README.md //项目说明
6. electron-vite官方中文文档
electron-vite | 下一代 Electron 开发构建工具