1.开启vue的图形界面
vue ui
2.根据自己需要创建一个vue的项目
3.通过vue ui图形界面安装插件依赖(其他的自己需要的自己安装)
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0",
"webpack": "^5.74.0"
},
"devDependencies": {
"@types/electron-devtools-installer": "^2.2.0",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"electron": "^13.6.9",//主要依赖
"electron-devtools-installer": "^3.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"naive-ui": "^2.33.3",
"prettier": "^2.4.1",
"sass": "^1.55.0",
"sass-loader": "^13.0.2",
"ts-loader": "~8.2.0",
"typescript": "~4.5.5",
"vfonts": "^0.0.3",
"vue-cli-plugin-electron-builder": "^2.1.1"//主要依赖
}
4.在package.json的script加上这两行
"electron:build": "chcp 65001 && vue-cli-service electron:build",
"electron:serve": "chcp 65001 && vue-cli-service electron:serve",
5.运行&打包
最后得到
这边文章时在看着别人的文章实践成功后,总结出来的,联系侵删