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”,
- devDependencies
- dependencies
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