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();
}

你可能感兴趣的:(web前端)