vue框架对接手机app

   最近在参与一个移动端的项目，要做一个功能模块接入到已有的手机app中。从要确定要做就开始参与，记录下整个流程过程吧。
    制作手机采用的框架是vue和SUI共同使用，使用grunt及webpack进行自动化构建代码。

一、搭建环境

使用grunt压缩css及js,webpack压缩vue，首先要先下载安装node.js，他们依赖于node运行。

然后再下载安装使用的插件，简单而言直接
npm install  grunt -g

二、app要展示各种图表

各种图表选择的是echarts插件，但是在页面上引用插件会消耗流量。现在使用node，即可在node下载 echarts包，等到想使用的时候在进行下载。

使用方法：下载：npm  install echarts --save-dev

在页面上就可以直接引用使用：

var echarts =require('echarts');//即得到echarts所有的插件，要是想使用哪个就在require哪个就行。

之后使用就是定义一个宽高有值得div,然后就和之前那样初始化配置即可。

注意：但是在使用过程中，每个页面定义的eachrts的div不可重名，重名则会导致下一页面的div图表显示不出来。2.更好是在页面离开时销毁一下此页面的图表div,这样第二个页面就不会受干扰。

beforeDestroy: function () {  //触发方式,在console里面打myVue.$destroy();    //在开始销毁实例时调用。此时实例仍然有功能。    var myChart = echarts.init(document.getElementById('main2'));    myChart.destroyed();}