一、安装我们所需要的一些库

cnpminstallmint-ui-S//安装mint-ui库，ui库，cnmp是按照淘宝镜像后的用法，用法和npm一样。-s是将库添加到项目的package.json文件中。
cnpminstallecharts-S//安装echarts库。用于绘制图表
cnpminstallvue-resource-S//相当于ajax取数据用的

这里写图片描述

package.json文件中可以看见我们当前项目中安装的控件

这里写图片描述

二、全局引入模块

在main.js中引入

importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'
importVueResousefrom'vue-resource'//引入vue-resource
importMintUIfrom'mint-ui'//引入mint-ui
import'mint-ui/lib/style.css'//引入mint-ui的样式
Vue.use(MintUI);
Vue.use(VueResouse);
Vue.config.productionTip=false

/*eslint-disableno-new*/
newVue({
el:'#app',
router,
template:'',
components:{App}
})

三、开始构建页面框架

1、将components（组件）文件夹下面的hello.vue清空作为记账页面，并添加Count.vue作为统计页面如下：





2、修改路由文件(router文件夹下面的index.js),加入我们刚才添加页面的路由。

importVuefrom'vue'
importRouterfrom'vue-router'
importHellofrom'@/components/Hello'//记账页面
importCountfrom"@/components/Count"//统计页面
Vue.use(Router)

exportdefaultnewRouter({
routes:[
{path:'/',component:Hello},
{path:'/Count',component:Count}
]
})

3、修改App.vue

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！