What is mpVue?

• Turn your VueJS code into a WeChat mini program
• Developed open source by Meituan-Dianping
• https://github.com/Meituan-Dianping/mpvue

why would I use mpVue?

• Vue Components
• Write modern javascript
• Write cross-platform code

How does mpVue work?

• vue-cli 3.0
• Webpack
• Babel
• Postcss

Jianbing Map - web

Jianbing Map - Mini Program

Jianbing Map - source code

mpVue Funkiness

• No global Vue instance, but can have global state
• v-show directive conflicts with CSS display property
• Page A -> Page A -> Back -> the two pages share a data object
• slot component: don't even think about it.

Cross-platform vueJS issues

• "Mini-program-first" approach to development
• Can't use any DOM-dependent packages (i.e., axios must swap with Fly)
• process.env.TARGET === 'mp' <- your app code and build is littered with this line
• Other weirdness