1.设置淘宝的镜像
npm config set registry https://registry.npmmirror.com
2.查看是否配置成功
npm config get registry
3.安装electron
npm install -g electron
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是一款针对windows的node版本管理工具 ,nvm是mac中的node版本管理工具。
安装nvmw
npm install -g nvmw
使用nvmw
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 —legacy–peer–deps
第二步 修改自己项目的vue.config.js,路径必须修改为 ./,不是这个后续打包好的页面可能会出现白屏,加载不出来的情况
module.exports = {
publicPath: './',
}
第三步 打包自己的vue项目,将打包出来的 dist 文件夹复制到之前拉取的electron-quick–start文件夹中并和node_modules同级就行
npm run build
第四步 在electron-quick–start项目中,下载打包需要的依赖 electron-packager
npm install electron-packager --save-dev
第五步 进入electron-quick–start项目,删除项目根目录下的 index.html 文件
第六步 在electron-quick–start项目中找到入口文件 main.js ,修改打包的文件路径为我们的index.html(替换成我们的文件非常非常的重要,注意行数,一般都在16行多一点)
// main.js 原始内容
mainWindow.loadFile('index.html')
// 修改后的内容
mainWindow.loadFile('./dist/index.html')*
第七步 在electron-quick–start项目中,进入 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进行投诉反馈,一经查实,立即删除!