Vue+iview+Echarts+electron 桌面应用
目录一、Vue项目创建1、安装node.js2、Vue开发环境3、搭建Vue项目（1）项目初始化（2）修改启动项（3）项目预览二、引入Echarts1、Echarts安装2、引入Echarts3、Echarts组件4、生成项目三、electron打包1、 package.json 和 main.js2、electron-packager打包（1）全局安装`electron-packager`（2）
·
效果图：
一、Vue项目创建
1、安装node.js
#下载安装包：https://nodejs.org/en/
cmd输入node -v 和npm -v查看是否安装成功
2、Vue开发环境
#命令行下载淘宝镜像命令工具 cnpm
npm install cnpm -g --registry=http://registry.npm.taobao.org
#用 cnpm 命令全局安装vue-cli脚手架
cnpm install --global vue-cli
输入vue，出来vue的信息说明安装成功
3、搭建Vue项目
（1）项目初始化
使用命令创建项目，一步步选择之后开始等等项目创建完成
vue init webpack app
（2）项目预览
cd demo
npm run dev
打开浏览器，复制粘贴命令行显示的地址（ http://localhost:8080），跳出页面
二、引入ivew+Echarts
1、ivew+Echarts安装
cnpm install ivew -save
cnpm install echarts -save
2、引入ivew+Echarts
项目src/main.js中引入ivew+Echarts
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
import Echarts from 'echarts'
Vue.prototype.echarts = Echarts
3、Echarts组件
将src/components/HelloWorld修改为如下内容
<style scoped>
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-logo{
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-nav{
width: 420px;
margin: 0 auto;
margin-right: 20px;
}
</style>
<template>
<div class="layout">
<Layout>
<Header>
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo"></div>
<div class="layout-nav">
<MenuItem name="1">
<Icon type="ios-navigate"></Icon>
Item 1
</MenuItem>
<MenuItem name="2">
<Icon type="ios-keypad"></Icon>
Item 2
</MenuItem>
<MenuItem name="3">
<Icon type="ios-analytics"></Icon>
Item 3
</MenuItem>
<MenuItem name="4">
<Icon type="ios-paper"></Icon>
Item 4
</MenuItem>
</div>
</Menu>
</Header>
<Layout>
<Sider hide-trigger :style="{background: '#fff'}">
<Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate"></Icon>
Item 1
</template>
<MenuItem name="1-1">Option 1</MenuItem>
<MenuItem name="1-2">Option 2</MenuItem>
<MenuItem name="1-3">Option 3</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics"></Icon>
Item 3
</template>
<MenuItem name="3-1">Option 1</MenuItem>
<MenuItem name="3-2">Option 2</MenuItem>
</Submenu>
</Menu>
</Sider>
<Layout :style="{padding: '0 24px 24px'}">
<Breadcrumb :style="{margin: '24px 0'}">
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem>Layout</BreadcrumbItem>
</Breadcrumb>
<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
<div id="echart" style="width: 940px;height:500px;"></div>
</Content>
</Layout>
</Layout>
</Layout>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {}
},
mounted() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart'));
// 绘制图表
var option = {
title : {
text: '保有储量变化图',
subtext: '一次能源'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['煤','石油','天然气']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['2009','2010','2011','2012','2013','2014','2015','2016','2017'],
splitNumber: 10
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'煤',
type:'bar',
data:[1683.47,1654.23,1640.12,1641.6,1639.68,1642.7,1610.41,1639.45,1722.2],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'石油',
type:'bar',
data:[22490.2,24947.67,29844.34,31397.94,33713,36300.8,38445.3,38375.6,38158.7],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
},
{
name:'天然气',
type:'bar',
data:[5502.54,5628.11,5478,6376.26,6231.14,8047.88,7857.1,7802.5,8695.01],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
myChart.setOption(option);
}
}
</script>
npm run dev
打开http://localhost:8080 ，显示页面
4、生成项目
执行生成命令
npm run build
出现如下效果
项目下回多出一个dist的文件夹，里面是打包好的东西，双击index.html显示网页内容则证明生成成功
（1）打包页面显示空白
修改index.js 中的生成路径，第46行改为assetsPublicPath: './',，否则后面程序运行打包页面会显示空白，找不到路径
（2）页面部分空白，router-view内容无法显示
// mode: ‘history’,//将这个模式关闭就好
（3）iview 打包之后，图标无法显示
在 build/webpack.prod.conf.js 中,将extract改为false
接下来一切操作都在dist文件夹目录下。
三、electron打包
1、安装 electron
用 cnpm 命令安装 electron
cnpm install electron -g
cmd输入electron -v查看是否安装成功
2、 package.json 和 main.js
在dist文件夹下，复制粘贴下面的 package.json 和 main.js文件，最终目录如图
在package.json中：
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
在main.js中
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
运行
electron .
3、electron-packager打包
（1）全局安装electron-packager
npm install electron-packager -g
（2）运行打包命令
electron-packager . demo --win --out outApp --arch=x64 --app-version 1.0.0 --electron-version 5.0.0 --overwrite --ignore=node_modules
在dist\outApp\demo-win32-x64文件夹下生成可执行文件demo.exe,双击运行程序
嫌每次输入太长，可以将在package.json中添加
"scripts": {
"start": "electron .",
"build": "electron-packager . myApp --win --out outApp --arch=x64 --app-version 1.0.0 --electron-version 5.0.0 --overwrite --ignore=node_modules"
}
这样输入npm run start相当于执行了electron .,测试打包效果
输入npm run build相当于执行了打包命令，在dist\outApp\myApp-win32-x64文件夹下生成可执行文件myApp.exe
4、源码加密
在outApp\demo-win32-x64\resources\app里有写的源码。写的代码完全暴露在用户电脑上是非常不安全的，可以通过electron 自带的加密功能解决这个问题。
（1）全局安装 asar
npm install asar -g
（2）使用asar指令进行加密
在resources目录下使用asar指令进行加密
asar pack ./app app.asar
将原来的app文件夹删除，这样生成的app.asar就加密了之前的源代码
双击demo.exe重新运行程序
前往低代码交流专区
更多推荐
8
0- 0
已为社区贡献1条内容
所有评论(0)