基于mpvue的小程序项目怎么搭建-mile米乐体育

这篇文章将为大家详细讲解有关基于mpvue的小程序项目怎么搭建，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

前言

mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架，按米乐app官网登录官网说可以达到小程序与h5界面使用一套代码。使用此框架，开发者将得到完整的 vue.js 开发体验，同时为 h5 和小程序提供了代码复用的能力。如果想将 h5 项目改造为小程序，或开发小程序后希望将其转换为 h5，mpvue 将是十分契合的一种mile米乐体育的解决方案。

为什么要用mpvue

首先微信小程序推荐简洁的开发方式，通过多页面聚合完成轻量的产品功能。小程序以离线包方式下载到本地，通过微信客户端载入和启动，开发规范简洁，技术封装彻底，自成开发体系，本身定位为一个简单的逻辑视图层框架，官方并不推荐用来开发复杂应用，但业务需求却难以做到精简。复杂的应用对开发方式有较高的要求，如组件和模块化、自动构建和集成、代码复用和开发效率等，但小程序开发规范较大的限制了这部分能力。所以为了解决上述问题，提高开发效率，提供更好的开发体验，通过使用基于 vue.js 的mpvue框架来开发微信小程序。

mpvue的特点

1. 彻底的组件化开发能力：提高代码

2. 完整的 vue.js 开发体验

3. 方便的 vuex 数据管理方案：方便构建复杂应用

4. 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotreload

5. 支持使用 npm 外部依赖

6. 使用 vue.js 命令行工具 vue-cli 快速初始化项目

7. h5 代码转换编译成小程序目标代码的能力

项目搭建

项目构成

1、采用mpvue 官方脚手架搭建项目底层结构2、采用fly.js 作为http 请求库3、采用stylus作为项目css预处理工具。

项目框架结构和文件目录结构

主要关注应用程序代码所在的src目录

├──src//我们的项目的源码编写文件 │├──components//组件目录 ││└──head//导航组件 │├──config//公共配置 ││└──tips//提示与加载工具类 │├──http//http请求配置文件 ││└──api//接口调用文件 ││└──config//fly配置文件 │├──pages//项目页面目录 │├──store//状态管理vuex配置目录 ││└──actions.js//actions异步修改状态 ││└──getters.js//getters计算过滤操作 ││└──mutation-types.js//mutations类型 ││└──mutations.js//修改状态 ││└──index.js//我们组装模块并导出store的地方 ││└──state.js//数据源定义 │├──stylus//styluscss处理器目录 ││└──common.styl//全局css样式 ││└──index.styl//stylus出口 ││└──mixin.styl//mixin方法 ││└──reset.styl//resetcss │├──untils//工具函数目录 ││└──index.js │├──app.vue//app入口文件 │├──main.js//主配置文件

搭建过程

一、通过官方文档 快速创建一个小程序http://mpvue.com/mpvue/

#全局安装vue-cli $npminstall--globalvue-cli  #创建一个基于mpvue-quickstart模板的新项目 $vueinitmpvue/mpvue-quickstartmy-project  #安装依赖 $cdmy-project $npminstall #启动构建 $npmrundev

二、微信开发者工具打开dist目录，查看页面是否显示。

三、配置 fly

#npm安装flyio $npminstallflyio--save

1、在src下 创建 http目录 目录结构为：

│├──http//http请求配置文件 ││└──api.js//接口调用文件 ││└──config.js//fly配置文件

2、config.js

//引入fly varfly=require("flyio/dist/npm/wx") varfly=newfly;  //配置请求基地址 ////定义公共headers //fly.config.headers={xx:5,bb:6,dd:7} ////设置超时 //fly.config.timeout=10000; ////设置请求基地址 //fly.config.baseurl="https://wendux.github.io/"  //添加拦截器 fly.interceptors.request.use((config,promise)=>{ //给所有请求添加自定义header config.headers["x-tag"]="flyio"; returnconfig; })  //vue.prototype.$http=fly//将fly实例挂在vue原型上  exportdefaultfly

3、api.js

importflyfrom'./config' importqsfrom'qs'  //配置api接口地址 letroot='接口域名';  /** *接口模版====post * *exportconsttest=params=>{returnfly.post(`${root}/xx/xx`,qs.stringify(params))}; * *接口模版====get * *exportconsttest1=function(){returnfly.get(`${root}/api/getnewslist`)} * * *用法： *在页面用引入test *import{test}from'../../http/api.js' * *test(params).then(res=>{console.log(res)}) */  exportconsttest=params=>{returnfly.post(`${root}/xx/xx`,qs.stringify(params))};

四、配置 stylus

#npm安装flyio $npminstallstylus--save-dev $npminstallstylus-loader--save-dev

1、在src下 创建 stylus目录 目录结构为：

│├──stylus//styluscss处理器目录 ││└──common.styl//全局css样式 ││└──index.styl//stylus出口 ││└──mixin.styl//mixin方法 ││└──reset.styl//resetcss

2、mixin.stylus

考虑到将来可能要复用到h6项目中 所以这里写了一个 单位转换的方法【px2rem】，并没有使用存在平台差异的rpx，以后即便迁移到web 端, 只需要处理【px2rem】的单位转换逻辑就好

//单行显示省略号 no-wrap() text-overflow:ellipsis overflow:hidden white-space:nowrap  //多行显示省略号 no-wrap-more($col) display:-webkit-box -webkit-box-orient:vertical -webkit-line-clamp:$col overflow:hidden  //rem转换$px/75*1rem  px2rem($px) $px*1rpx

3、index.stylus

@import"./mixin.styl" @import"./reset.styl" @import"./common.styl"

4、引入

在 app.vue 中引入

 @import"stylus/index.styl" 

**如果要用到mixin.stylus中的方法，需要在页面的stylus文件中 单独引用 mixin.stylus

五 配置 config目录

1、在src下 创建 config目录 目录结构为：

│├──config//公共配置 ││└──tips.js//提示与加载工具类

2、tips.js

考虑到将来可能要复用到h6项目中 所以这里将微信提供的提示与加载框封装成工具类，以后即便迁移到web 端, 只需要删除tips.js的wx api就可以了。

可以在 main.js中引入，绑定到原型上

importtipsfrom'./config/tip' vue.prototype.$tips=tips

在页面中 this.$tips.alert("请输入手机号")调用

/** *提示与加载工具类 */ exportdefaultclasstips{ constructor(){ this.isloading=false; } /** *弹出提示框 */  staticsuccess(title,duration=500){ settimeout(()=>{ wx.showtoast({ title:title, icon:"success", mask:true, duration:duration }); },300); if(duration>0){ returnnewpromise((resolve,reject)=>{ settimeout(()=>{ resolve(); },duration); }); } }  /** *弹出确认窗口 */ staticconfirm(text,payload={},title="提示"){ returnnewpromise((resolve,reject)=>{ wx.showmodal({ title:title, content:text, showcancel:true, success:res=>{ if(res.confirm){ resolve(payload); }elseif(res.cancel){ reject(payload); } }, fail:res=>{ reject(payload); } }); }); }  statictoast(title,onhide,icon="success"){ settimeout(()=>{ wx.showtoast({ title:title, icon:icon, mask:true, duration:500 }); },300);  //隐藏结束回调 if(onhide){ settimeout(()=>{ onhide(); },500); } }   /** *弹出加载提示 */ staticloading(title="加载中"){ if(tips.isloading){ return; } tips.isloading=true; wx.showloading({ title:title, mask:true }); }  /** *加载完毕 */ staticloaded(){ if(tips.isloading){ tips.isloading=false; wx.hideloading(); } }  staticshare(title,url,desc){ return{ title:title, path:url, desc:desc, success:function(res){ tips.toast("分享成功"); } }; }  staticalert(text,ok){ if(ok===void0){ok=function(res){};} if(!text){ return; } wx.showmodal({ content:text, showcancel:false, confirmcolor:'#000000', cancelcolor:'#000000', success:ok }); }; }  /** *静态变量，是否加载中 */ tips.isloading=false;

六、配置vuex

1、在src下 创建 store目录 目录结构为：

│├──store//状态管理vuex配置目录 ││└──actions.js//actions异步修改状态 ││└──getters.js//getters计算过滤操作 ││└──mutation-types.js//mutations类型 ││└──mutations.js//修改状态 ││└──index.js//我们组装模块并导出store的地方 ││└──state.js//数据源定义

2、main.js中引入store, 并绑定到vue构造函数的原型上，这样在每个vue的组件都可以通过this.$store访问store对象。

importstorefrom'./store' vue.prototype.$store=store;

3、state.js

在数据源文件中定义变量：

conststate={ test:0, } exportdefaultstate

4、mutation-types.js

在mutation-types.js中定义你的mutation的名字

exportconsttest='test'//这是测试的

5、mutations.js

在mutations.js中写处理方法

import*astypesfrom'./mutation-types' constmatations={ /** *state:当前状态树 *data:提交matations时传的参数 */ //是否有渠道 [types.test](state,data){ state.test=data; },  }  exportdefaultmatations

6、使用方法

#在storeindex.js中引入 importvuefrom'vue'; importvuexfrom'vuex'; importstatefrom'./state' importmutationsfrom'./mutations'  vue.use(vuex);  exportdefaultnewvuex.store({ state, mutations, })

在页面中引用

7、将vuex中的数据持久化到本地 （使用vuex-persistedstate）

#安装vuex-persistedstate $npminstallvuex-persistedstate--save

在 store index.js 引入

importvuefrom'vue'; importvuexfrom'vuex'; importstatefrom'./state' importmutationsfrom'./mutations' importcreatepersistedstatefrom'vuex-persistedstate'  vue.use(vuex);  exportdefaultnewvuex.store({ state, mutations, plugins:[ createpersistedstate({ storage:{ getitem:key=>wx.getstoragesync(key), setitem:(key,value)=>wx.setstoragesync(key,value), removeitem:key=>{} } }) ] })

关于“基于mpvue的小程序项目怎么搭建”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。