mpvue是美团团队开发的一个基于vue.js核心开发小程序的前端框架,可以使用vue的语法来写小程序页面。对于我这种只会vue全家桶的前端来说,算是福音了。 介绍一下vantUI 因为比较懒,就
mpvue是美团团队开发的一个基于vue.js核心开发小程序的前端框架,可以使用vue的语法来写小程序页面。对于我这种只会vue全家桶的前端来说,算是福音了。 介绍一下vantUI因为比较懒,就选了一个UI框架来节省时间,其实有几个不错的UI框架,对比了一下vant weapp比较符合当前需求,所以最后选用了这个有赞的UI框架,不过iview和weui也不错,虽然我没用过 起步首先先安装一个mpvue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev 复制代码 更多详情可以自己去Mpvue官网 查看,我就不多说了。 安装好了之后目录结构是酱紫的:
看起来和平常的vue项目没太大区别 # 启动项目 $ npm run dev 复制代码 点开微信开发者工具,新建项目,目录选择项目下的dist文件夹,打开项目,会看到项目默认页面 引入UI框架研究了很多,也试过了Mpvue-zanUI,最后还是放弃了,直接把git上下载的vantUI的dist拷贝到自己项目的dist目录下,我自己重命名了文件名为vant。如图:
引入之后,要使用的话就直接引入就好了 usingComponents: { 'van-search': '../../vant/search/index', 'van-col': '../../vant/col/index', 'van-row': '../../vant/row/index', 'van-icon': '../../vant/icon/index' } 复制代码 mpvue安装下来每个页面都mian.js不方便,也不能使用router。 加上mpvue-entry和mpvue-router-patch后就可以了。 mpvue-entry: 集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新 mpvue-router-patch: 在 mpvue 中使用 vue-router 兼容的路由写法 复制代码 1、安装依赖 cnpm install mpvue-entry --D cnpm install mpvue-router-patch --S 复制代码 2、创建router文件 在src目录下创建router文件夹 复制代码
3、引入mpvue-router-patch 在src目录下的main.js文件里引入mpvue-router-patch
4、修改webpack的配置
修改webpack.base.conf.js的配置
webpack主要就是这些配置改动了。 5、配置router.js,并在对应的页面使用UI组件 我就直接上代码了
页面引入
效果如图:
6、结束 好了基本上UI和router的配置就解决了,码字好累,下篇接着写flyio的使用,我也是边做边写,有问题的可以一起探讨。 |