基于mpvue搭建微信小程序项目框架的教程详解

　　

　　

mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持Vue。js语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发

　　

　　

本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正。

　　

　　

1,使用scss语法:依赖插件sass-loader, node-sass

　　

2,像vue一样使用路由:依赖插件mpvue-entry和mpvue-router-patch

　　

3,使用ZanUI:有赞团队的小程序版界面组件库(GitHub)

　　

4,使用vuex进行状态管理

　　

5,使用flyio进行数据交互:GitHub地址

　　

　　

讲解: 　　

<强>一、使用scss语法

　　

1,安装依赖

　　

cnpm安装node-sass sass-loader——save-dev

　　

因为一些不知名的原因导致node-sass经常安装失败,所以采用cnpm方式安装最好

　　

2,在.vue文件中的风格节点加上lang=皊css”,这样就可以愉快地使用sass进行开发了,无需再webpack.base.config.js中配置装载机,webpack会自动识别.scss文件以及.vue中的scss代码。

　　

<强>二,像vue一样使用路由

　　

在使用mpvue提供的命令vue init mpvue/mpvue-quickstart我的项目创建项目后,会发现每个页面都要配置主要。js文件,不仅繁琐而且显得多余,所以我们是否可以改造成像vue一样使用路由的方式呢,答案是可以的,需要用到mpvue-entry和mpvue-router-patch插件(集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新)和

　　

mpvue-entry:集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新

　　

mpvue-router-patch:在mpvue中使用vue-router兼容的路由写法

　　

1,安装依赖

　　 　　 　　cnpm安装mpvue-entry——save-dev 　　cnpm安装mpvue-router-patch——保存 　　 　　

2项目src文件夹下创建路由器文件夹和router.js文件

　　

基于mpvue搭建微信小程序项目框架的教程详解

　　

3项目引入src下的主。js文件

　　 　　 　　从“Vue”进口Vue 　　从“mpvue-router-patch”进口MpvueRouterPatch 　　Vue.use (MpvueRouterPatch) 　　 　　

注:主要。js的出口默认{}不能为空,不然编译时不生成app.json文件

　　

4,修改webpack.base.conf.js配置文件

　　 　　 　　const MpvueEntry=要求(“mpvue-entry”) 　　模块。出口={ 　　条目:MpvueEntry.getEntry (“。/src/路由器/router.js”), 　　…… 　　} 　　
　　 　　

5,配置路由器。js文件

　　 　　//首个路由为首页 　　模块。出口=[{ 　　路径:“页/索引”, 　　名称:“指数”, 　　配置:{ 　　navigationBarTitleText:“文章详情”,//引入UI组件,后面会讲到 　　usingComponents: { 　　“zan-button”:“. ./dist/btn指数” 　　} 　　} 　　},{ 　　路径://列表”页面, 　　名称:“列表”, 　　配置:{ 　　navigationBarTitleText:“名单详情” 　　} 　　}] 　　 　　

　　

1,将UI组件库克隆到本地

　　

基于mpvue搭建微信小程序项目框架的教程详解

　　

2,将上图中的dist目录拷贝到mpvue项目的输出目录中

　　

基于mpvue搭建微信小程序项目框架的教程详解

　　

3,在路由器。js文件中引入UI组件

　　 　　 　　模块。出口=[{ 　　路径:“页/索引”, 　　名称:“指数”, 　　配置:{ 　　navigationBarTitleText:“文章详情”,//引入UI组件 　　usingComponents: {//组件名和引用路径 　　“zan-button”:“. ./dist/btn指数” 　　} 　　} 　　}] 　　 　　

4页面中使用UI组件

　　 　　 　　& lt; template> 　　& lt; div类=爸甘北? 　　& lt; zan-button类型=爸鳌贝笮=靶　痹谌啡细犊? lt;/zan-button> 　　& lt;/div> 　　& lt;/template> 　　 　　

5, 　　

小程序使用自定义组件:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

　　

ZanUI组件库使用讲解:https://github.com/youzan/zanui-weapp/blob/dev/README.md

　　

基于mpvue搭建微信小程序项目框架的教程详解