mpvue从一无所有开始仿大众点评小程序
最近尝试了下用mpvue框架开发小程序，它是基于vue开发的。
官方介绍：
mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
但就使用感受来说，还不如学原生呢，主要是mpvue和原生的客服体验差别太大了，mpvue八白年才有一次更新，而原生在小程序团队的不断完善下已经愈来愈好了，而且新开发的接口通过原生进行使用也会省去不少烦恼~
但会vue上手mpvue确实比较简单哈，下面使用mpvue从一无所有开始仿大众点评小程序。
一、开发准备(假设没有部署任何环境)
(1) 安装微信开发者工具
(2) 安装node.js（主要是使用npm，方便对包进行管理）
(3) 全局安装vue-cli, cmd中运行
npm install --g vue-cli
二、安装mpvue模板
(1) 选择一个工作路径，cmd中运行
vue init mpvue/mpvue-quickstart dianping-demo
安装途中询问的选项基本都可以选y，但如果问到是否使用ESLint时，墙裂建议选n!。
ESlint主要是用来进行语法检测的，在码字时不时报错，很！烦！的！如果手残点了y，也可以按这里的操作来取消。
(2) 进入创建的dianping-test目录，并安装依赖
cd dianping-demo
npm install
(3) 编译运行项目
npm start
编译完成后，会显示下图，但先不必关闭这个窗口，因为如果修改代码并保存后，它会自动重新编译。
至此，一个简单的小程序就创建完成了。
使用微信开发者工具打开当前工作目录，即可看到当前的小程序。
##三、开发大众点评小程序 下面我们在这锅小程序模板的基础上修改，来进行大众点评小程序的开发。
(0) 首先我们来大致了解一下项目的文件结构
dianping-demo
├── package.json
├── project.config.json
├── static
├── node_modules
├── dist
├── src
│ ├── components
│ ├── pages
│ ├── utils
│ ├── App.vue
│ ├── app.json
│ └── main.js
├── config
└── build
我们主要关注的是src文件夹，在该文件夹下，模板已自动生成了一些文件。
src/components中存放的是在界面上可复用的组件；src/pages中存放的是小程序的页面，相当于原生小程序中的pages；src/utils存放的是工具函数，一般模板小程序中的工具函数都用不上，可删；App.vue是小程序的入口文件，控制小程序的整体逻辑，相当于原生小程序中的app.js+app.wxss；app.json控制小程序页面加载和状态栏，相当于原生小程序中的app.json；main.js中生成vue实例并挂载，相当于原生小程序的main.js
其他目录和文件主要是小程序的配置文件，想详细了解可看这篇博文使用mpvue开发小程序教程（二）
想了解原生小程序的目录结构看这里
(1) 全局配置
首先我们可以从这里下载icon等本地文件，将整个images文件夹放入static文件夹中（或直接将整个项目下载，然后将其中的static与当前的static合并），
将dist、src/App.vue和src/app.json中的原内容清空，
将以下内容写入App.vue:
<script>
/*相当于原生小程序的app.js*/
export default {
}
</script>
<style>
/*将横向滑动栏隐藏*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
</style>
将以下写入app.json
{
"pages": [
"pages/index/main"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "大众点评",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#999",
"backgroundColor": "#fafafa",
"selectedColor": "#333",
"borderStyle": "white",
"list": [{
"text": "首页",
"pagePath": "pages/index/main",
"iconPath": "static/images/home.png",
"selectedIconPath": "static/images/home-on.png"
}, {
"text": "排行榜",
"pagePath": "pages/index/main",
"iconPath": "static/images/rankicon.png",
"selectedIconPath": "static/images/rankicon-on.png"
}, {
"text": "关注",
"pagePath": "pages/index/main",
"iconPath": "static/images/follow.png",
"selectedIconPath": "static/images/follow-on.png"
}, {
"text": "我的",
"pagePath": "pages/index/main",
"iconPath": "static/images/myicon.png",
"selectedIconPath": "static/images/myicon-on.png"
}],
"position": "bottom"
}
}
(2) 页面配置 将```src/pages```下的所有原文件删除,然后在该目录下创建```index```文件夹，在```index```下创建```index.vue```、```main.js``` 再```main.js```中写入： ```node.js /*对每个页面生成vue实例，并挂载*/ import Vue from 'vue' import App from './index'
const app = new Vue(App)
app.$mount()
<br>
(3) 首先在```index.vue```的```<template>```便签中进行页面结构的布置，可用HTML进行书写，以下代码段为例：
```html
<template>
<!--相当于原生小程序的index.wxml-->
<div class="container">
<div v-for="(item, index) in category1" class="category1">
<img :src=item.icon>
<div class="desc">{{item.desc}}</div>
</div>
</div>
</template>
页面模板遵循vue语法:
- 用
v-for="(item, index) in category1对category1中的对象进行循环；- 使用
:src=item.icon将item.icon的值赋予src；- 使用双括号
{{item.desc}}显示变量tem.desc的值。
(4) 然后在``` ```
(5) 在```
