Vue+iview+Echarts+electron 桌面应用

发表于 | 分类于 | 阅读次数:

一、Vue项目创建

1、安装node.js

#下载安装包：https://nodejs.org/en/
cmd输入node -v 和npm -v查看是否安装成功

在这里插入图片描述

2、Vue开发环境

#命令行下载淘宝镜像命令工具 cnpm

1
npm install cnpm -g --registry=http://registry.npm.taobao.org

#用 cnpm 命令全局安装vue-cli脚手架

1
cnpm install --global vue-cli

输入vue，出来vue的信息说明安装成功
在这里插入图片描述

3、搭建Vue项目

（1）项目初始化

使用命令创建项目，一步步选择之后开始等等项目创建完成

1
vue init webpack app

在这里插入图片描述

（2）项目预览

1
2
cd demo
npm run dev

在这里插入图片描述
打开浏览器，复制粘贴命令行显示的地址（ http://localhost:8080），跳出页面
在这里插入图片描述

二、引入ivew+Echarts

1、ivew+Echarts安装

1
cnpm install ivew -save
1
cnpm install echarts -save

2、引入ivew+Echarts

项目src/main.js中引入ivew+Echarts

1
2
3
4
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);
1
2
import Echarts from 'echarts'
Vue.prototype.echarts = Echarts

在这里插入图片描述

3、Echarts组件

将src/components/HelloWorld修改为如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<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>
1
npm run dev

打开http://localhost:8080 ，显示页面
在这里插入图片描述

4、生成项目

执行生成命令

1
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

1
cnpm install electron -g

cmd输入electron -v查看是否安装成功
在这里插入图片描述

2、 package.json 和 main.js

在dist文件夹下，复制粘贴下面的 package.json 和 main.js文件，最终目录如图
在这里插入图片描述
在package.json中：

1
2
3
4
5
{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

在main.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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.

运行

1
electron .

3、electron-packager打包

（1）全局安装electron-packager

1
npm install electron-packager -g

（2）运行打包命令

1
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中添加

1
2
3
4
"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

1
npm install asar -g

（2）使用asar指令进行加密

在resources目录下使用asar指令进行加密

1
asar pack ./app app.asar

在这里插入图片描述
将原来的app文件夹删除，这样生成的app.asar就加密了之前的源代码
双击demo.exe重新运行程序

0%