npm install -g cnpm --registry=https://registry.npm.taobao.org
3、
安装git
以上都是前端工程师基本的操作了这里不赘述，不清楚的百度即可
1、全局安装electron及electron-packager
全局安装electron ; 全局安装electron-packager，用于打exe包
cnpm install electron -g
cnpm install electron-packager -g
2、git下载官方示例并运行
在某一个目录下右键，点击“Git Bash Here”
依次执行以下命令，克隆示例后进入示例文件夹并用淘宝镜像安装依赖包（也可以直接用npm，但是会慢很多），运行项目
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
cnpm install
npm run start
会出现以下界面，表示运行成功
3、修改vue项目vue.config.js并构建
由于我们以往构建的vue项目是需要放在服务器上，一般不能够在本地直接打开index.html，其中的原因主要是静态文件的引用路径问题。
以vue-cli脚手架的vue.config.js为例
将publicPath修改为“./”
cd到vue项目根路径。执行npm run build，生成dist文件夹，此时我们直接在文件管理器中双击index.html，可以直接打开项目
将dist文件夹下的所有内容复制到electron-quick-start示例根路径下，覆盖原有index.html
在此目录下运行
npm run start
会发现我们的项目已经显示在桌面应用窗口中
4、打exe包
在pakage.json中的scripts中添加以下命令
"build": "electron-packager . myapp --out myapp --arch=x64 --overwrite --ignore=node_modules"
electron-packager . 应用名称 --out 输出文件夹 --arch=x64 --overwrite --ignore=node_modules
打开cmd终端，执行npm run build
npm run build
打包后如图
双击myapp.exe即可打开桌面应用
以上，感谢观看
准备工作1、安装nodejs2、配置淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org3、安装git以上都是前端工程师基本的操作了这里不赘述，不清楚的百度即可1、全局安装electron及electron-packager全局安装electron ; 全局安装electron-packager，用于打exe包cnpm install electron -gcnpm install .
5、 打开我们的
electron
文件，找到其
中
的f
ron
tend文件，将我们的压缩包移动到
electron
文件
中
，并改名为f
ron
tend，解压缩，替换掉f
ron
tend文件，如下图。1、
electron
是一个
桌面
应用
程序的框架，可以将
vue
项目
集
成
为一个
桌面
应用
程序。压缩的目的是为了更好的将
项目
文件复制到我们的
electron
框架
中
。这样我们的f
ron
tend文件
中
就装着我们的
vue
项目
文件了。6、打开
electron
文件，
运行
代码。7、这样就可以
运行
我们的
桌面
程序了。3、下载后将你
需
要集
成
的
项目
打包
。
二、编写
应用
程序main.js
在
vue
项目
目录下创建main.js，代码如下
const { app, BrowserWindow, Menu } = require('
electron
');
function createWindow() {
vue
add
electron
-builder
注意：执行过程
中
可能会出现错误，如果出现错误，他会提示哪条命令没有执行
成
功，推荐用cnpm（淘宝镜像）执行那条失败的命令
3、执行命令查看是否能
运行
项目
npm run
electron
:serve
4、在
项目
根目录下添加
vue
.config.js配置文件，
打包
配置如下
module.exports = {
//
打包
Vue
有一个配置
Vue
.config.errorHandler，用于指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和
Vue
实例。我们可以借助这个函数，进行
应用
的错误日志记录并做一些自定义的处理（兜底），防止出现一些严重异常导致
应用
挂掉。
一般情况下错误日志可以在前端页面
中
展示，并且
需
要记录到数据库
中
。在异常发生时我们可以调用接口存储到后台，前端查询的实现可以使用状态管理（如果
需
要持久化存储就配合本地存储，但一般不太建议，因为异常太多的话会影响性能）
首先，我们可以
关于
vue
项目
构建Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory的解决方案
node
中
通过javascript使用内存时只能使用部分内存（64位系统下约为1.4 GB，32位系统下约为0.7 GB），这就是我们编译
项目
时为什么会出现内存泄露了。
查看安装的node的版本
node -v
8.0以上的版本通过设置NODE_OPTIONS环境.
这里的externals意思是：
externals配置选项提供了「从输出的 bundle
中
排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer's envi
ron
ment)
中
的依赖。此功能通常对library 开发人员来说是最有用的，然而也会有各种各样的
应用
程序用到它。
防止将某些import的包(pa...
npm install sass-resources-loader -S
2、在根路径下（package.json同级）新建
vue
.config.js（如果已经存在，则不用新建）
vue
.config.js
module.exports = {
chainWebpack: config => {
const oneOfsMap = config.module.rule('scss').oneOfs.store
Vue
和
Electron
可以很好地结合起来，用于开发
桌面
应用
程序。下面是一个
简单
的
Vue
和
Electron
的
桌面
应用
开发实例：
1. 首先，
需
要安装
Vue
和
Electron
的依赖：
npm install
vue
npm install
electron
2. 创建
Vue
的
项目
，可以使用
Vue
CLI来创建一个新的
项目
。
vue
create my-
electron
-app
3. 在
Vue
项目
中
安装
Electron
的依赖：
npm install
electron
--save-dev
4. 创建
Electron
的主进程和渲染进程：
在
Vue
项目
的根目录下创建一个名为`main.js`的
Electron
主进程文件，编写如下内容：
const
electron
= require('
electron
');
const app =
electron
.app;
const BrowserWindow =
electron
.BrowserWindow;
let
mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
mainWindow.loadFile('index.html');
mainWindow.on('closed', function () {
mainWindow = null;
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
app.on('activate', function () {
if (mainWindow === null) {
createWindow();
在
Vue
项目
的`src`目录下创建一个名为`main.js`的
Electron
渲染进程文件，编写如下内容：
import
Vue
from '
vue
'
import App from './App.
vue
'
Vue
.config.productionTip = false
new
Vue
({
render: h => h(App),
}).$mount('#app')
5. 创建一个名为`index.html`的文件，用于加载
Vue
应用
。
<!DOCTYPE html>
<meta charset="utf-8">
<title>My
Electron
App</title>
</head>
<div id="app"></div>
<script src="./
dis
t/js/chunk-vendors.js"></script>
<script src="./
dis
t/js/app.js"></script>
</body>
</html>
6. 在`package.json`文件
中
添加以下内容，用于启动
Electron
应用
。
"name": "my-
electron
-app",
"version": "0.1.0",
"description": "A
Vue
-
Electron
desktop application",
"main": "main.js",
"scripts": {
"start": "
electron
."
"dependencies": {
"
electron
": "^11.3.0",
"
vue
": "^2.6.11"
"devDependencies": {
"
vue
-template-compiler": "^2.6.11"
7. 启动
应用
程序：
在命令行
中
运行
以下命令，启动
Electron
应用
程序。
npm start
以上就是一个
简单
的
Vue
和
Electron
的
桌面
应用
开发实例。
解决 元素隐式具有 “any“ 类型，因为类型为 “string“ 的表达式不能用于索引类型 “Object“。 在类型 “Object“ 上找不到具有类型为 “string“ 的参数的索引签名
10109
