简介:

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

前言:

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

  搭建内容包括:

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

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

  3、使用ZanUI:有赞团队的小程序版UI组件库(GitHub

  4、使用vuex进行状态管理

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

项目结构:

讲解:

  一、使用scss语法

  1、安装依赖

  cnpm install node-sass sass-loader --save-dev

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

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

  二、像vue一样使用路由

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

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

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

  1、安装依赖

  cnpm install mpvue-entry --save-dev

  cnpm install mpvue-router-patch --save

  2、项目src文件夹下创建router文件夹和router.js文件

  

  

  3、项目引入src下的main.js文件 

import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch' Vue.use(MpvueRouterPatch)

  注:main.js的 export default {} 不能为空,不然编译时不生成app.json文件

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

const MpvueEntry = require('mpvue-entry')

module.exports = {
entry:MpvueEntry.getEntry('./src/router/router.js'),
.......
}

  

  5、配置router.js 文件 

// 首个路由为首页
module.exports = [{
path: 'pages/index',
name: 'Index',
config: {
navigationBarTitleText: '文章详情',
    //引入UI组件,后面会讲到
usingComponents:{
"zan-button": "../dist/btn/index"
}
}
}, {
path: 'pages/list/list',
name: 'List',
config: {
navigationBarTitleText: 'list详情'
}
}]

  三、使用小程序UI组件

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

  

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

  

  3、在router.js文件中引入UI组件 

module.exports = [{
path: 'pages/index',
name: 'Index',
config: {
navigationBarTitleText: '文章详情',
//引入UI组件
usingComponents:{
//组件名和引用路径
"zan-button": "../dist/btn/index"
}
}
}]

  

  4、页面中使用UI组件 

<template>
<div class="index">
<zan-button type="primary" size="small">确认付款</zan-button>
</div>
</template>

  5、

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

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

  四、使用vuex进行状态管理

  1、安装

    cnpm install vuex --save

  2、引入(main.js文件)

    impotr store from './vuex/index'

    Vue.prototrype.$store = store//挂在到vue原型上

  五、使用flyio进行数据交互

  1、安装

    cnpm install flyio --save

  2、引入(main.js文件)

    const Fly = require("flyio/dist/npm/wx")//引入

    const fly = new Fly

    Vue.prototrype.$fly = fly//挂在到vue原型上

  3、使用

    

        add(){
//在add方法中执行接口请求
this.$fly.get('http://******/user?id=133')
.then(function (res) {
//请求成功
console.log('res',res);
})
.catch(function (err) {
//请求失败
console.log('err',err);
});
}

  

基于mpvue搭建小程序项目框架的更多相关文章

  1. 基于mpvue的小程序项目搭建的步骤

    mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小 ...

  2. 基于mpvue的小程序项目搭建的步骤一

    未标题-1.png mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验 ...

  3. mpvue开发小程序项目遇到的问题

    mpvue项目 最近用mpvue开发了一个家庭私人医生签约的小程序项目.记录总结一下,开发过程中遇到的一些问题. 关于页面进栈出栈的状态值问题 页面进出栈,会触发onLoad/unLoad事件.出栈不 ...

  4. mpvue搭建小程序框架

    http://mpvue.com/mpvue/ 美团开源了mpvue 由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler) 运行时框架 runtime 和代码编译器 c ...

  5. mpvue微信小程序项目踩坑记录

    1.mpvue入门教程, http://mpvue.com/mpvue/quickstart.html # . 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm - ...

  6. 记一次基于 mpvue 的小程序开发及上线实战

    小程序名称:一起打车吧 项目地址: 客户端:https://github.com/jrainlau/taxi-together-client 服务端:https://github.com/jrainl ...

  7. asp.net -mvc框架复习(7)-基于MVC搭建用户登录项目框架

    整体框架: 一.搭建Model层 1.添加通用数据访问类 2.添加实体类(封装和传递数据,和数据库中数据表对应) 3.添加数据访问类(通常和实体类同名,但是后缀名发生改变) 二.搭建控制器层Contr ...

  8. 使用mpvue开发小程序教程(一)

    前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...

  9. 学习笔记:mpvue开发小程序——入门

    接下来可能要开发一个小程序,同事推荐使用mpvue,那么我提前熟悉下. 官网地址:http://mpvue.com/ 1.快速上手 http://mpvue.com/mpvue/quickstart/ ...

随机推荐

  1. VMware 虚拟化编程(4) — VDDK 安装

    目录 目录 前文列表 VDDK 安装 VDDK 前文列表 VMware 虚拟化编程(1) - VMDK/VDDK/VixDiskLib/VADP 概念简析 VMware 虚拟化编程(2) - 虚拟磁盘 ...

  2. 阶段1 语言基础+高级_1-3-Java语言高级_03-常用API第二部分_第6节 基本类型包装类_1_包装类的概念

    只有这两个比较特殊

  3. #1146 - Table 'phpmyadmin.pma__table_uiprefs' doesn't exist

    在使用phpmyadmin时,数据库总报错#1146 - Table ‘phpmyadmin.pma_table_uiprefs' doesn't exist 修改phpmyadmin的配置文件con ...

  4. windows和linux中查看端口占用情况并kill掉对应进程

    好几次在不同的情况下遇到 需要查看端口信息 并且kill掉对应进程的情况 相关的参数总是记不全 在这里记录下 以后查看方便 windows中查看正在使用端口的信息netstat -ano|findst ...

  5. OuterXml和InnerXml

    例如 <bkk> <rp fe="few" > <fe>fff</fe> </rp> </bkk> 对于fe ...

  6. vue—拖拽

  7. Consul集群加入网关服务(Spring Cloud Gateway)

    Consul集群加入网关服务 架构示意图 外部的应用或网站通过外部网关服务消费各种服务,内部的生产者本身也可能是消费者,内部消费行为通过内部网关服务消费. 一个内部网关和一个外部网关以及一个Consu ...

  8. Kotlin学习(2)函数

    函数声明: fun plus(a:Int,b:String):Boolean{ //fun 函数名(参数名:参数类型,参数名:参数类型):返回值类型 println(a) return true // ...

  9. Python 批量文件下载

    python文件 批量下载 .图片批量下载 ,批量请求.爬虫 #==================================================================== ...

  10. 【学习总结】SQL学习总结

    参考链接: 菜鸟教程: 一.认识sql 二.sql语法 三.sql高级教程 四.sql函数 一.认识SQL SQL是什么? SQL 是用于访问和处理数据库的标准的计算机语言. SQL,指结构化查询语言 ...