一、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 demo

（2）修改启动项

#打开demo>config>index.js
修改第18行autoOpenBrowser: true

（3）项目预览

在项目根目录下

cd demo
npm install
npm run dev

执行命令后浏览器自动跳出页面

二、引入Echarts

1、Echarts安装

cnpm install echarts -s

2、引入Echarts

项目src>main.js中引入Echarts

import Echarts from 'echarts'
Vue.prototype.echarts = Echarts

3、Echarts组件

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

<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="main" style="width: 600px;height: 400px;margin-left: auto;margin-right: auto;"></div>
</template>

<script>
  import echarts from 'echarts'
  export default {
      name: '',
      data () {
          return {
              charts: '',
              opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
              opinionData:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
              ]
          }
      },
      methods:{
          go(){
            this.$router.push('/echar')
          },
          drawPie(id){
              this.charts = echarts.init(document.getElementById(id))
              this.charts.setOption({
                tooltip: {
                  trigger: 'item',
                  formatter: '{a}<br/>{b}:{c} ({d}%)'
                },
                legend: {
                  orient: 'vertical',
                  x: 'left',
                  data:this.opinion
                },
                series: [
                  {
                    name:'访问来源',
                    type:'pie',
                    radius:['50%','70%'],
                    avoidLabelOverlap: false,
                    label: {
                      normal: {
                        show: false,
                        position: 'center'
                      },
                      emphasis: {
                        show: true,
                        textStyle: {
                          fontSize: '30',
                          fontWeight: 'blod'
                        }
                      }
                    },
                    labelLine: {
                      normal: {
                        show: false
                      }
                    },
                    data:this.opinionData
                  }
                ]
              })
          }
      },
    //调用
      mounted(){
          this.$nextTick(function() {
              this.drawPie('main')
          })
      }
  }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>

npm run dev

4、生成项目

执行生成命令

npm run build

出现如下效果

项目下回多出一个dist的文件夹，里面是打包好的东西，双击index.html显示网页内容则证明生成成功

接下来一切操作都在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,双击运行程序

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重新运行程序