electron-vue + element-ui环境部署之安装流程步骤
2023-06-01 00:00:00
electron
Electron是一个使用JavaScript, HTML和CSS等Web技术创建原生程序的框架;
Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,通俗来说就是软件,比如像QQ、优酷、网易音乐等等。
可以构建跨平台桌面程序,本身支持node.js,可以使用node.js的一些模块。
Electron官网:
https://electronjs.org/
进入安装步骤
1.安装
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
注意的问题:
1.node-sass能不用就不用
2.检查确认vue与node版本
3.Object.fromEntries is not a function electron-vue错误解决方式
yarn add polyfill-object.fromentries
.electron-vue/dev-client.js中引入:
import "polyfill-object.fromentries"
4.localhost:9080/__webpack_hmr 404解决方式
.electron-vue/dev-runner.js文件取消注释:
app.use(hotMiddleware)
加入element-ui:
yarn add element-ui
引入element-ui:
在src/renderer/main.js文件中加入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
将element-ui加入白名单:
在.electron-vue/webpack.renderer.config.js文件中加入
let whiteListedModules = ['vue','element-ui']
5.Electron Security Warning (Node.js Integration with Remote Content)报错解决方式
在main.js文件中加入:
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
看看效果:
相关文章