基于mpvue搭建小程序项目框架
简介:
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搭建小程序项目框架的更多相关文章
- 基于mpvue的小程序项目搭建的步骤
mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小 ...
- 基于mpvue的小程序项目搭建的步骤一
未标题-1.png mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验 ...
- mpvue开发小程序项目遇到的问题
mpvue项目 最近用mpvue开发了一个家庭私人医生签约的小程序项目.记录总结一下,开发过程中遇到的一些问题. 关于页面进栈出栈的状态值问题 页面进出栈,会触发onLoad/unLoad事件.出栈不 ...
- mpvue搭建小程序框架
http://mpvue.com/mpvue/ 美团开源了mpvue 由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler) 运行时框架 runtime 和代码编译器 c ...
- mpvue微信小程序项目踩坑记录
1.mpvue入门教程, http://mpvue.com/mpvue/quickstart.html # . 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm - ...
- 记一次基于 mpvue 的小程序开发及上线实战
小程序名称:一起打车吧 项目地址: 客户端:https://github.com/jrainlau/taxi-together-client 服务端:https://github.com/jrainl ...
- asp.net -mvc框架复习(7)-基于MVC搭建用户登录项目框架
整体框架: 一.搭建Model层 1.添加通用数据访问类 2.添加实体类(封装和传递数据,和数据库中数据表对应) 3.添加数据访问类(通常和实体类同名,但是后缀名发生改变) 二.搭建控制器层Contr ...
- 使用mpvue开发小程序教程(一)
前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...
- 学习笔记:mpvue开发小程序——入门
接下来可能要开发一个小程序,同事推荐使用mpvue,那么我提前熟悉下. 官网地址:http://mpvue.com/ 1.快速上手 http://mpvue.com/mpvue/quickstart/ ...
随机推荐
- Git的资源地址
下载地址:https://git-scm.com/downloads 安装教程: https://baijiahao.baidu.com/s?id=1619087367741781687&wf ...
- <每日一题> Day2:CodeForces-1141C.PolycarpRestoresPermutation(思维题)
原题链接 参考代码: #include <iostream> #include <cstring> using namespace std; + , INF = 0x3f3f3 ...
- 硬核!如何模拟 5w+ 的并发用户?
来自:http://t.cn/ES7KBkW 本文将从负载测试的角度,描述了做一次流畅的5万用户并发测试需要做的事情. 你可以在本文的结尾部分看到讨论的记录. 快速的步骤概要 编写你的脚本 使用JMe ...
- python进阶之类的反射
有应用场景的技术才是有灵魂的技术------>最近同时问我,在python中,给你一个函数或者类的字符串名称,你怎么得到该函数和类,以下结合源码记录我得到的方式: 1.给一个函数的字符串&quo ...
- 问题 B: 傻鸡抓大闸蟹
问题 B: 傻鸡抓大闸蟹 时间限制: 1 Sec 内存限制: 128 MB提交: 94 解决: 39[提交] [状态] [命题人:jsu_admin] 题目描述 背景又到了吃大闸蟹的季节,黄老师想 ...
- C# 共享文件读取(转)
using System;using System.Runtime.InteropServices;using BOOL = System.Boolean;using DWORD = System.U ...
- EasyUi 表格自适应宽度
第一次接触EasyUi想要实现表格宽度自适应,网上找了好多文章,都没有实现,有网友实现了可是自己看不懂.可能是太简单高手都懒得分享,现在把自己的理解和实现记录一下,希望可以帮到向自己一样的菜鸟,步骤如 ...
- 20191125PHP抽象类、接口和魔术方法
抽象类 不能被实例化,用于其他类的继承.使用abstract(抽象).抽象方法一定是抽象类,抽象类不一定有抽象方法. 接口interface是特殊的抽象类. eg: <?php //抽象类 ab ...
- 【记录】git error:bad signature 解决方法
今天提交git 的时候出现 bad signature 错误,意思是git下的index文件损坏了,需要重新生成下 error: bad signature fatal: index file cor ...
- LightOJ 1289 LCM from 1 to n(位图标记+素数筛
https://vjudge.net/contest/324284#problem/B 数学水题,其实就是想写下位图..和状压很像 题意:给n让求lcm(1,2,3,...,n),n<=1e8 ...