electron+vue创建自己PC的app

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.运行&打包

最后得到

这边文章时在看着别人的文章实践成功后，总结出来的，联系侵删