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'


看看效果:

electron-vue.png

相关文章