Vue+MUI+HBuilder开发H5+应用

自从移动端跨平台开发概念开始兴起后，出来很多解决方案，不管是框架生成原生控件，还是直接外面套个webview做个H5应用，这些方案都给移动开发带来了便利。

什么是MUI

MUI是最近接原生App体验的高性能前端框架

MUI有什么特点，为什么要使用MUI？

首先再次我需要先声明一下我的个人观点：我们在使用一个框架或者库的时候，应该尽量去迁就这个框架自身的特点，并且充分利用好这些特点，这样才有意义，不然你为什么不自己去写个框架呢？

专门为移动开发设计的

MUI是专门为移动开发而设计的框架，来自DCloud的团队，不是从PC搬过来的，也没有过于冗余的设计，专注则必然专业。

轻巧

体积相比其他类似框架要小很多，H5在先天上确实比不上原生的体验和性能，所以我们更加要考虑它的精确而不冗余，不希望我们的页面加载过程中需要去初始化一些用不到的内容。

简单易懂

MUI配合Vue一起使用简单易懂，上手较快。

HBuilder开发工具的强力支持

毕竟是一家的产品，可以说HBuilder为MUI的发展插上了翅膀，强大的提示功能以及代码块的实现真的非常方便，很多常用的功能都提供了快捷生成的功能，比如导航栏、Tab、图片轮播等等。另外打包过程也变得非常easy，云端打包，或者本地打包都可以。

HTML5+的支持

H5+的提供了众多原生API可以调用，使得H5开发过程中能够更加逼近原生体验，包括UI、硬件调用、分享、三方登录、文件操作等等。

快速上手

创建项目

首先使用Vue cli先快速创建一个模板项目。

$ npm install -g vue-cli
$ vue init Funmi/vue-template-for-hbuilder my-project
$ cd my-project
$ yarn (推荐使用yarn，应为yarn确实比npm好用很多)
$ yarn dev

使用Hbuilder打开my-project/dist中的目录，打开 manifest.json 点击云端获取，获取appid，并同步到 src/manifest.json 中，然后真机运行。
npm run dev 后代码会自动更新到 dist 目录，请不要用 Hbuilder 打开编译后的文件，以免影响真机测试。

Build Setup

# install dependencies
yarn

# 自动编译结果到指定文件夹
yarn dev

# serve with hot reload at localhost:8080
yarn webdev

# build for production with minification
yarn build

# build for production and view the bundle analyzer report
yarn build --report