electron-vue + element-ui环境部署之安装流程步骤

前端  /  管理员 发布于 2个月前   158

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'

看看效果：