mpvue是业内最火的小程序开发方案，Vue作者微博力推， GitHub上9000星好评如潮。

01

mpvue 专为小程序打造的框架

 

微信自推出小程序以来，热度一直居高不下，各大公司开始专门开发小程序，但是小程序自定义的wxml和wxss和自己定义的语法，让被三大框架统治的前端江湖头疼不易，因为需要专门为小程序开发一套代码来维护，也徒增了学习成本。

 

虽然中间有支持vuejs语法的wepy独领风骚，但只是在代码开发风格上借鉴了Vue，也是需要我们学习wepy的语法。直到mpvue横空出世，让前端的小伙伴们可以彻底解放出来。

 

 

mpvue是什么？

 

2018年3月，美团点评团队出品的小程序开发框架：mpvue，是现在业内最火的vue开发小程序解决方案。这里引用一下官方对mpvue的介绍。

 

mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验

以上介绍，完全是对前端的朋友们的一个大福利。既解决了小程序开发规范对较高复杂的开发方式的限制，如如组件和模块化、自动构建和集成、代码复用和开发效率等，还让开发者通过使用熟悉的 Vue.js 来开发微信小程序，降低学习新语法的成本。

而且mpvue在GitHub上获得9000星好评如潮，也得到了vuejs作者的微博力推，搞不好以后会变为vuejs的标准。

 

提供一份对原生小程序、mpvue、wepy 这三个开发框架的的横向比较，大家可自行对比下↓

 

 

图： 框架使用特点对比

 

 

02

带你动手体验mpvue的强大

 

 

学习最好的方式就动手，我们就徒手撸一个demo项目出来跑一跑

 

安装环境

 

1. 需要大家执行 npm install vue-cli -g安装vue-cli和小程序的开发者工具

2. 执行 vue init mpvue/mpvue-quickstart mpvue-demo 然后一路回车下去，你就得到了一个mpvue项目脚手架

3. 进入mpvue-demo目录，执行 npm install && npm run dev启动项目 然后打开微信开发者工具，打开mpvue-demo目录，就进入了mpvue的世界 先看下mpvue的src目录，也就是源码目录结构

   

基本看不出这是一个小程序项目，我们打开 /pages/counter/index.vue

1. <template>
2.  <div class="counter-warp">
3.  <p>Vuex counter：{{ count }}</p>
4.  <p>
5.  <button @click="increment">+</button>
6.  <button @click="decrement">-</button>
7.  </p>
9.  <a href="/pages/index/main" class="home">去往首页</a>
10.  </div>
11. </template>
13. <script>
14. // Use Vuex
15. import store from './store'
17. export default {
18.  computed: {
19.  count () {
20.  return store.state.count
21.  }
22.  },
23.  methods: {
24.  increment () {
25.  store.commit('increment')
26.  },
27.  decrement () {
28.  store.commit('decrement')
29.  }
30.  }
31. }
32. </script>
34. <style>
35. .counter-warp {
36.  text-align: center;
37.  margin-top: 100px;
38. }
39. .home {
40.  display: inline-block;
41.  margin: 100px auto;
42.  padding: 5px 10px;
43.  color: blue;
44.  border: 1px solid blue;
45. }
46. </style>

 

可以看出来这完全就是一个vuejs的组件，没有小程序的任何语法，我们现在把所有内容删掉，来尝试用vuejs做一个todolist

1. <template>
2.  <div class="mpvue-demo">
3.  <p class="title">{{title}}</p>
4.  </div>
5. </template>
7. <script>
9. export default {
10.  data () {
11.  return {
12.  title: 'Hello Mpvue'
13.  }
14.  }
15. }
16. </script>
18. <style>
19. .title{
20.  color:#ed12a3;
21.  text-align: center;
22. }
23. </style>

 

修改完毕后，打开 src/main.js修改一下pages的配置，改为 pages: ['^pages/counter/main'], 这样counter页面就变成了首页， 这时候小程序的开发者工具应该就能显示出一行 hello mpvue的字样，如果没变化，可以看下命令行，可能是代码规范不符合

我们写的，都是单纯的html+css+vue的语法，但是已经能够在小程序里继续运行了，然后我们来继续，尝试渲染一个列表

1. <template>
2.  <div class="mpvue-demo">
3.  <p class="title">{{title}}</p>
4.  <ul class="todos">
5.  <li v-key='i' v-for='(todo,i) in todos'>{{todo}}</li>
6.  </ul>
7.  </div>
8. </template>
10. <script>
12. export default {
13.  data () {
14.  return {
15.  title: 'Hello Mpvue',
16.  todos: ['吃饭', '睡觉', '慕课学习']
17.  }
18.  }
19. }
20. </script>
22. <style>
23. .title{
24.  color:#ed12a3;
25.  text-align: center;
26. }
27. ul.todos{
28.  margin:20px;
29. }
30. </style>

我们新增了ul和li，并且使用v-for渲染列表，下面我们尝试加上用户输入，能够添加一条记录 ，需要用到input和button标签，以及vuejs的事件处理@click

1. <template>
2.  <div class="mpvue-demo">
3.  <p class="title">{{title}}</p>
4.  <input type="text" v-model='mytodo'>
5.  <button @click='addTodo'>添加一条</button>
6.  <ul class="todos">
7.  <li v-key='i' v-for='(todo,i) in todos'>{{todo}}</li>
8.  </ul>
9.  </div>
10. </template>
12. <script>
14. export default {
15.  data () {
16.  return {
17.  mytodo: '',
18.  title: 'Hello Mpvue',
19.  todos: ['吃饭', '睡觉', '慕课学习']
20.  }
21.  },
22.  methods: {
23.  addTodo () {
24.  if (!this.mytodo) {
25.  return
26.  }
27.  this.todos.push(this.mytodo)
28.  this.mytodo = ''
29.  }
30.  }
31. }
32. </script>
34. <style>
35. .title{
36.  color:#ed12a3;
37.  text-align: center;
38. }
39. ul.todos{
40.  margin:20px;
41. }
42. input{
43.  border:2px solid #ed12a3;
44. }
45. </style>

然后我们再添加一个功能来尝试一下计算属性以及样式渲染，没个事件都添加一个点击时间，可以标记为完成，并且显示删除的样式，我们需要对todos的数据结构进行扩展，加入done字段

1. <template>
2.  <div class="mpvue-demo">
3.  <p class="title">{{title}}</p>
4.  <input type="text" v-model='mytodo'>
5.  <button @click='addTodo'>添加一条</button>
6.  <ul class="todos">
7.  <li
8.  v-for='(todo,i) in todos'
9.  v-key='i'
10.  :class="{'done':todo.done}"
11.  @click='toggle(i)'
12.  >{{todo.text}}</li>
13.  </ul>
14.  </div>
15. </template>
17. <script>
19. export default {
20.  data () {
21.  return {
22.  mytodo: '',
23.  title: 'Hello Mpvue',
24.  todos: [
25.  {text: '吃饭', done: false},
26.  {text: '睡觉', done: false},
27.  {text: '慕课学习', done: false}
28.  ]
29.  }
30.  },
31.  methods: {
32.  addTodo () {
33.  if (!this.mytodo) {
34.  return
35.  }
36.  this.todos.push(this.mytodo)
37.  this.mytodo = ''
38.  },
39.  toggle (i) {
40.  this.todos[i].done = !this.todos[i].done
41.  }
42.  }
43. }
44. </script>
46. <style>
47. .title{
48.  color:#ed12a3;
49.  text-align: center;
50. }
51. ul.todos{
52.  margin:20px;
53. }
54. input{
55.  border:2px solid #ed12a3;
56. }
57. .done{
58.  text-decoration: line-through;
59. }
60. </style>

 

我们还需要显示已经完成的进度，以及清空按钮，这里就需要vuejs的计算属性

1. <template>
2.  <div class="mpvue-demo">
3.  <p class="title">{{title}}</p>
4.  <input type="text" v-model='mytodo'>
5.  <button @click='addTodo'>添加一条</button>
6.  <button @click='clearTodo'>清空</button>
7.  <ul class="todos">
8.  <li
9.  v-for='(todo,i) in todos'
10.  v-key='i'
11.  :class="{'done':todo.done}"
12.  @click='toggle(i)'
13.  >{{todo.text}}</li>
14.  <li>
15.  {{todoNum}}/{{todos.length}}
16.  </li>
17.  </ul>
18.  </div>
19. </template>
21. <script>
23. export default {
24.  data () {
25.  return {
26.  mytodo: '',
27.  title: 'Hello Mpvue',
28.  todos: [
29.  {text: '吃饭', done: false},
30.  {text: '睡觉', done: false},
31.  {text: '慕课学习', done: false}
32.  ]
33.  }
34.  },
35.  computed: {
36.  todoNum () {
37.  return this.todos.filter(v => !v.done).length
38.  }
39.  },
40.  methods: {
41.  clearTodo () {
42.  this.todos = this.todos.filter(v => !v.done)
43.  },
44.  addTodo () {
45.  if (!this.mytodo) {
46.  return
47.  }
48.  this.todos.push({text: this.mytodo, done: false})
49.  this.mytodo = ''
50.  },
51.  toggle (i) {
52.  this.todos[i].done = !this.todos[i].done
53.  }
54.  }
55. }
56. </script>
58. <style>
59. .title{
60.  color:#ed12a3;
61.  text-align: center;
62. }
63. ul.todos{
64.  margin:20px;
65. }
66. input{
67.  border:2px solid #ed12a3;
68. }
69. .done{
70.  text-decoration: line-through;
71. }
72. </style>

最后 我们在加入本地存储，每次变动的时候都存在localStorage里，并且再初始化的 created生命周期函数里，从localStorage获取列表初始化todos即可

 

注意中间有一次刷新的操作，下次进来 依然能保存之前的状态，全部代码如下

1. <template>
2.  <div class="mpvue-demo">
3.  <p class="title">{{title}}</p>
4.  <input type="text" v-model='mytodo'>
5.  <button @click='addTodo'>添加一条</button>
6.  <button @click='clearTodo'>清空</button>
7.  <ul class="todos">
8.  <li
9.  v-for='(todo,i) in todos'
10.  v-key='i'
11.  :class="{'done':todo.done}"
12.  @click='toggle(i)'
13.  >{{todo.text}}</li>
14.  <li>
15.  {{todoNum}}/{{todos.length}}
16.  </li>
17.  </ul>
18.  </div>
19. </template>
21. <script>
23. export default {
24.  // 数据
25.  data () {
26.  return {
27.  mytodo: '',
28.  title: 'Hello Mpvue',
29.  todos: [
30.  ]
31.  }
32.  },
33.  // 计算属性
34.  computed: {
35.  todoNum () {
36.  return this.todos.filter(v => !v.done).length
37.  }
38.  },
39.  // created生命周期，组件创建后执行
40.  created () {
41.  // 从本地存储里获取数据
42.  this.todos = wx.getStorageSync('todos') || []
43.  },
44.  methods: {
45.  // 清空已完成的事情
46.  clearTodo () {
47.  this.todos = this.todos.filter(v => !v.done)
48.  this.updateStorage()
49.  },
50.  // 更新本地存储
51.  updateStorage () {
52.  wx.setStorageSync('todos', this.todos)
53.  },
54.  // 添加事件
55.  addTodo () {
56.  if (!this.mytodo) {
57.  return
58.  }
59.  this.todos.push({text: this.mytodo, done: false})
60.  this.mytodo = ''
61.  this.updateStorage()
62.  },
63.  // 设置事件状态
64.  toggle (i) {
65.  this.todos[i].done = !this.todos[i].done
66.  this.updateStorage()
67.  }
68.  }
69. }
70. </script>
72. <style>
73. .title{
74.  color:#ed12a3;
75.  text-align: center;
76. }
77. ul.todos{
78.  margin:20px;
79. }
80. input{
81.  border:2px solid #ed12a3;
82. }
83. .done{
84.  text-decoration: line-through;
85. }
86. </style>