VUE网页端改成桌面端（Electron）

VUE网页端改成桌面端（Electron）

展示效果

1、安装vue-cli

前提安装：http://nodejs.cn/download/

npm install @vue/cli　-g　// 安装

vue -V　　// 查询版本

$ vue -V
@vue/cli 4.3.1

2、创建项目

2.1　vue create 项目名

2.2 下载已有vue项目

git clone  XXX 	 //下载指定项目 

//进入项目目录 

npm install

//验证项目状态 

npm run dev  // 验证成功，进入下一步

2.2.1 修改package.json

• scripts
  “scripts”: {
  “dev”: “node --max_old_space_size=4096 build/dev-server.js”,
  “build”: “node --max_old_space_size=4096 build/build.js”,
  “serve”: “vue-cli-service serve”,
  “build-app”: “vue-cli-service build”,
  “lint”: “vue-cli-service lint”
  },
  • dependencies
    “dependencies”: {
    “core-js”: “^3.6.4”,
    • devDependencies
      “devDependencies”: {
      “@vue/cli-plugin-babel”: “~4.3.0”,
      “@vue/cli-plugin-eslint”: “~4.3.0”,
      “@vue/cli-service”: “~4.3.0”,

2.2.2 初始化依赖插件

npm  install

启动测试
报错

Module build failed: Error: Cannot find module 'core-js/library/fn/get-iterator'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (E:\git-workspace\inor\inor-example\app-template\node_modules\babel-runtime\core-js\get-iterator.js:1:93)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (E:\git-workspace\inor\inor-example\app-template\node_modules\babel-core\lib\transformation\file\index.js:6:21)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)

清空node_modules,重新install
报错

npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

查看当前项目的依赖树

npm ls 

发现此插件依赖的版本与当前需要的core-js不一致，先注释。

npm ERR! missing: babel-runtime@6.26.0, required by babel-polyfill@6.26.0

3、安装成功后执行

进入vue 项目目录

vue add electron-builder

4、运行

npm run electron:serve
遇到以下报错：

• babel版本冲突
  babel 升级工具修改配置

  npx babel-upgrade --write

• 缺失插件

 ERROR  Error: Cannot find module '@babel/plugin-syntax-import-meta'

执行 npm install

• : Cannot read property ‘version’ of undefined
  安装 eslint-plugin-flowtype
  npm install eslint --save-dev
  npm install babel-eslint --save-dev
  npm install eslint-plugin-flowtype --save-dev

• Module build failed (from ./node_modules/eslint-loader/index.js):
  Error: No ESLint configuration found in E:\git-workspace\inor\inor-example\app-template\src.
  安装eslint

npm init -y

npm install eslint --save-dev

./node_modules/.bin/eslint --init 初始化配置文件

• Error: Failed to load plugin ‘@typescript-eslint’ declared in ‘BaseConfig’: Cannot find module ‘typescript’
  Referenced from: BaseConfig
  VScode下搭配ESLint、typescript-eslint的代码检查配方

Eslint的typescript插件

无需再装其他ts相关的插件了。

参考文档 typescript-eslint如何使用

确保已经安装TypeScript and @typescript-eslint/parser，然后安装@typescript-eslint/eslint-plugin

npm i typescript --save-dev
npm i @typescript-eslint/parser --save-dev
npm i @typescript-eslint/eslint-plugin --save-dev

修改.eslintrc配置文件

module.exports = {
“extends”: [“airbnb-base”, “plugin:@typescript-eslint/recommended”],
“parser”: “@typescript-eslint/parser”,
“plugins”: ["@typescript-eslint"],
rules: {
“no-console”: “off”,
“@typescript-eslint/indent”: [“error”, 2],
}
};

配置完毕，项目中最终的依赖如下

“devDependencies”: {
“@typescript-eslint/eslint-plugin”: “^1.7.0”,
“@typescript-eslint/parser”: “^1.7.0”,
“eslint”: “^5.16.0”,
“eslint-config-airbnb-base”: “^13.1.0”,
“eslint-plugin-import”: “^2.17.2”,
“typescript”: “^3.4.5”
}

5、打包

npm run electron:build

6、安装

运行dist_electron打包文件中的electron-test2 Setup 0.1.0.exe

详情参考：https://www.jianshu.com/p/d2ab300f8a9a