1.设置淘宝镜像

npm config set registry https://registry.npmmirror.com

2.查看是否配置成功

npm config get registry

3.安装electron

npm install -g electron

4.更新npm

npm install -g npm@8.19.2

5.安装cnpm

npm install -g cnpm

6.全局安装vue-Cli脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli

7.检查

vue --version

8.全局升级

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

9.创建项目

安装vue脚手架后,可用命令 vue create 项目创建vue项目

二.更新

 1.使用nvmw

nvmw是一款针对windowsnode版本管理工具nvmmac中的node版本管理工具

安装nvmw

npm install -g nvmw

使用nvmw

nvmw –h 帮助

nvmw –v 版本

nvmw install v8.12.0 安装8.12.0版本node,安装成功后提示

运行 nvmw use v8.12.0 切换当前版本,至此成功升级node切换对应版本

使用nvmw  switch v14.5.0 彻底更换默认的版本

// 安装
nvmw install <version>

// 切换版本
nvmw use <version>
// 直接修改默认的版本
nvmw  switch v14.5.0

3.启动项目提示如下错误

Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

 使用

npm install --legacy-peer-deps

打包 vue打包exe  

一步 拉去代码执行官方代码

git clone https://github.com/electron/electron-quick-start
npm install
npm run start

npm install若是出错 使用npm install —legacypeerdeps 

第二步 修改自己项目的vue.config.js路径必须修改为 ./,不是这个后续打包好的页面可能会出现白屏加载不出来的情况

module.exports = {   
	publicPath: './',   
} 

第三步 打包自己vue项目,将打包出来的 dist 文件夹复制到之前拉取electron-quickstart文件夹中并和node_modules同级就行

npm run build

第四步 在electron-quickstart项目中,下载打包需要依赖 electron-packager

npm install electron-packager --save-dev

第五步 进入electron-quickstart项目,删除项目根目录下的 index.html 文件
六步electron-quickstart项目中找到入口文件 main.js修改打包的文件路径我们index.html替换我们的文件非常非常的重要,注意行数,一般都在16行多一点)

// main.js 原始内容 
mainWindow.loadFile('index.html') 
// 修改后的内容 
mainWindow.loadFile('./dist/index.html')*

第七步 在electron-quickstart项目中,进入 package.json ,在 scripts 中添加 packager 指令如下所示

"scripts": { 
"start": "electron .", 
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
} 

第八步 运行命令打包,然后项目中会出现一个 App-win32-x64 的文件夹,这个文件就是打包好的桌面应用,文件夹里有一个 App.exe 文件,App.exe就是这个项目的启动文件

npm run packager 

 

原文地址:https://blog.csdn.net/qq_42394862/article/details/127020478

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_19553.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注