vueCli3加electron创建项目

最新推荐文章于 2024-05-22 11:49:54 发布
最新推荐文章于 2024-05-22 11:49:54 发布
阅读量869 收藏 1
点赞数
分类专栏： electron Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LLL_liuhui/article/details/103137422
版权

1、项目创建

vue create project

2、运行vue ui打开图形化界面，安装vue-cli-plugin-electron-builder插件

或者

vue add electron-builder

3、运行项目：

yarn electron:serve

打包项目：

yarn electron:build

 

LLL_LH
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-cli-plugin-electron-builder：使用Electron轻松构建用于桌面的Vue.js应用
01-30
Vue CLI插件电子生成器 使用Electron轻松构建用于桌面的Vue.js应用 生成状态： 顶级支持者 快速开始： 在使用Vue-CLI 3或4创建的应用程序目录中打开一个终端（建议使用4）。 然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器： vue add electron-builder 而已！ 您准备好出发了！ 要启动开发服务器： 如果使用（强烈建议）： yarn electron:serve 或者，如果您使用NPM： npm run electron:serve 要构建您的应用程序： 使用纱线： yarn electron:build 或使用NPM： npm run electron:build 要查看更多文档， 。 支持者 过去的支持者
【2021年】通过vue-cli创建electron项目
夏2同学的博客
07-26 618
1. 创建项目 vue create your-project-name 2. vue-cli添加electron-builder依赖 // 切换工作目录 cd vue3-electron/ // 添加依赖 vue add electron-builder // !!! 请保证node版本>=14.0.0 否则会报错 其官网地址：Vue CLI Plugin Electron Builder (nklayman.github.io) 3. 添加UI依赖 // 这里选择使用的是bootstrap
vue-cli-plugin-electron-builder打包vue2
最新发布
2301_80553345的博客
05-22 397
会自动下载electron相关的包(需要选择node对应版本的electron包)，生成运行命令并在src目录下生成background.js。1、下载npm install vue-cli-plugin-electron-builder --save -dev。npm run electron:build打包，打包成功如下，会在dist文件夹中生成包。需要存在version，description，author，没有请添加。3、修改backgound.js，打开后窗口大小。
elementui基于vue-cli@3快速创建electron项目
LLL_liuhui的博客
03-24 1265
使用 vue-cli@3 1、快速地搭建一个基于 Element 的Vue项目。 1)创建vue项目 创建vue3项目之前，确认安装了@vue/cli npm install -g @vue/cli # OR yarn global add @vue/cli 如果已安装，执行如下命令。 vue create my-app cd my-app yarn serve 运...
Electron+vue-cli3开发跨平台桌面应用
EtherealSymbol的博客
07-17 1599
这里写目录标题1.创建项目1.1 安装Nodejs1.2 使用cnpm加速下载1.3 为什么不使用electron-vue搭建呢1.4 安装/升级vue-cli31.5 创建vue项目1.6 自动安装Electron1.7 手动安装Electron1.8 编译并启动APP2.配置项目2.1 配置ESLint代码格式检查工具2.2 配置vue3.项目基本设定3.1 主进程和渲染进程简介3.2 APP窗口大小3.3 取消跨域限制3.4 取消菜单栏3.5 设置APP窗口图标3.6 设置APP窗口标题栏名称4.打包
electron项目搭建使用vue-cli
chuy_young
01-21 269
1.nodejs环境 安装nodejs//不做介绍 2.npm全局安装vue npm install vue@next -g 3.cmd 使用vue创建vue项目 vue create demo(项目名称) 4.集成 electron vue add electron-builder 5.在pageage.json会生成下列指令 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build",
vue2+elementui+electron项目配置
06-06
如果你选择Vue CLI，可以运行`vue create my-app`，然后在创建过程中选择手动配置，添加Vue2和ElementUI。 安装ElementUI时，在项目根目录运行`npm install element-ui --save`，接着在`main.js`文件中引入并注册...
electron vue/cli 文件
02-23
在本篇文章中，我们将深入探讨 `Electron Vue CLI` 的核心概念、工作原理以及如何利用它来创建和管理项目。 ### 1. Electron 概述 `Electron` 是一个开源框架，由 GitHub 开发，用于构建桌面应用。它结合了 `...
Vue项目使用electron打包成.exe文件
08-22
Vue 项目与 Electron 结合可以创建桌面应用程序，而 Electron 是一个开源框架，允许开发者使用 JavaScript、HTML 和 CSS 创建跨平台的桌面应用。 首先，确保你的开发环境满足以下要求： 1. Node.js 版本：Electron ...
electron-vue3windows桌面项目.zip
05-13
标题 "electron-vue3windows桌面项目.zip" 暗示我们正在处理一个使用Electron框架构建的Windows桌面应用程序，该程序结合了Vue.js 3框架。这个项目可能是一个笔记应用，因为子文件名 "electron-vue3-inote-main" 中...
vue-cli-electron:基于vue cli建造的电子脚手架
03-26
Vue CLI Electron是一个强大的工具，它整合了Vue CLI与Electron框架，使得开发者能够轻松地创建具备桌面应用功能的Web应用程序。Vue CLI提供了快速的项目初始化、配置管理、代码生成和开发工作流，而Electron则允许...
electron-vue-cli3:electron和vue cli3的基础开发示例
05-25
electron-vue-cli3(electron和vue cli3的基础开发示例) electron+cli3 个人博客 :desktop_computer: 运行效果 克隆代码 git clone https://github.com/zjinh/electron-vue-cli3.git 安装依赖 cd electron-vue-cli3 npm i 淘宝的npm源 npm config set registry 'https://registry.npm.taobao.org' npm config set ELECTRON_MIRROR='https://npm.taobao.org/mirrors/electron/' 或者使用安装依赖 运行项目 npm run dev 打包项目 npm run build
创建electron+vue项目（vue 一）
qq_34533703的博客
05-06 307
创建electron+vue项目
vue-cli3+Electron
hunter_97的博客
04-22 3686
注意：我这里使用的是vuecli3。之前的版本可以参考electron-vue 起步。 一、 创建项目 创建vue项目。 参考我之前的文章vue 之 vue-cli3，创建项目。这里我创建的项目是electron-vue-test。 安装electron,自动安装和手动安装任选其一。 2.1 自动安装，进入到项目根目录，执行：vue add electron-builder，然后选择elec...
electron打包vue-cli项目为桌面程序（三）：开发环境使用electron开发桌面应用
欢迎
07-08 1539
一：引入electron cnpm install electron --save-dev 在开发环境使用electron 二：build文件夹下增加electron-preload.js文件，内容可以为空。 主要用来在创建桌面窗口前定义一些window全局变量。可根据项目自行定义。如：window.isElectron = true 在项目中进行判断是否为桌面程序打开，可以调用electr...
vue-cli3.x+electron安装教程
echo_Ae的博客
06-11 500
前言 这几天想搞个桌面软件玩玩，然后经过各种安装都靠不住，所以还是打算写一篇文章记录自己安装过程遇到的坑，需要对你有帮助。 教程开始 ps：请自行安装好vue环境 vue create my-electron cd 项目名称 我们使用 electron-builder插件 安装主要为了省事 vue add electron-builder 问题开始 node install.js报错 Response code 404 (Not Found) for https://npm.taobao.o
Electron 12 学习（三）Vue 3 安装与配置
05-21 808
全局安装 Vue 3 脚手架： npm i -g @vue/cli Microsoft Windows [版本 10.0.19042.985] (c) Microsoft Corporation。保留所有权利。 D:\WebstormProjects>npm i -g @vue/cli npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi' npm WARN deprecated request@2.88.2: req..
vue-cli3打包优化
斗战圣佛91的博客
06-20 3339
参考
vue-cli-plugin-electron-builder创建electron项目以及遇到的问题
weixin_47330679的博客
04-26 2555
文章目录前言一、创建vue项目二、安装插件安装electron-builder三、运行项目总结 前言 提示：vue-cli-plugin-electron-builder用于vue集成electron项目的插件 electron官方文档： https://www.electronjs.org/ vue-cli-plugin-electron-builder官方文档： 这里是引用https://nklayman.github.io/vue-cli-plugin-electron-builder/.
使用vue-cli创建electron项目
03-30
1. 安装Vue CLI 首先，需要确保已经安装了Node.js和npm。然后在终端中输入以下命令来安装Vue CLI： ``` npm install -g @vue/cli ``` 2. 创建Vue项目 在终端中输入以下命令来创建一个新的Vue项目： ``` vue create my-electron-app ``` 在创建过程中，可以选择使用默认配置或手动选择插件和配置。 3. 安装electron-builder 在终端中输入以下命令来安装electron-builder： ``` npm install electron-builder --save-dev ``` 4. 配置package.json 在package.json文件中添加以下内容： ``` "build": { "productName": "MyElectronApp", "appId": "com.example.my-electron-app", "directories": { "output": "build" }, "files": [ "dist/**/*", "node_modules/**/*", "package.json" ], "win": { "icon": "public/icon.ico", "target": "nsis" }, "nsis": { "oneClick": false, "allowElevation": true, "installerIcon": "public/icon.ico", "uninstallerIcon": "public/icon.ico", "installerHeaderIcon": "public/icon.ico", "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "MyElectronApp" } } ``` 其中，productName、appId、icon等可以根据实际情况进行修改。 5. 修改main.js 在src/main.js文件中添加以下内容： ``` const { app, BrowserWindow } = require('electron') let win function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('dist/index.html') win.on('closed', () => { win = null }) } app.on('ready', createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (win === null) { createWindow() } }) ``` 6. 编译打包 在终端中输入以下命令来编译打包应用： ``` npm run build ``` 打包后的应用程序将保存在build目录中。 7. 运行应用 在终端中输入以下命令来启动应用： ``` npm start ``` 应用程序将在Electron中运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值