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

 更新时间:2019年04月10日 10:49:24   作者:web-慰尘   我要评论

mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发。这篇文章主要介绍了基于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搭建微信小程序项目框架的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对澳门金沙网上娱乐网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • vue+swiper实现组件化开发的实例代码

    vue+swiper实现组件化开发的实例代码

    这篇文章主要介绍了vue+swiper实现组件化开发的相关资料,需要的朋友可以参考下
    2017-10-10
  • 详解前后端分离之VueJS前端

    详解前后端分离之VueJS前端

    本篇文章主要介绍了详解前后端分离之VueJS前端,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 详解Vue 动态添加模板的几种方法

    详解Vue 动态添加模板的几种方法

    本篇文章主要介绍了详解Vue 动态添加模板的几种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 详解vue-Resource(与后端数据交互)

    详解vue-Resource(与后端数据交互)

    本篇文章主要介绍了vue-Resource(与后端数据交互),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • vue使用xe-utils函数库的具体方法

    vue使用xe-utils函数库的具体方法

    这篇文章主要介绍了vue使用xe-utils函数库的具体方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Vue动画事件详解及过渡动画实例

    Vue动画事件详解及过渡动画实例

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作
    2019-02-02
  • vue中关闭eslint的方法分析

    vue中关闭eslint的方法分析

    这篇文章给大家讲述了vue中关闭eslint的方法内容,有需要的读者们可以参考学习下。
    2018-08-08
  • Vue仿手机qq的实例代码(demo)

    Vue仿手机qq的实例代码(demo)

    Vue.js(读音 /vju&#720;/, 类似于 view) 是一套构建用户界面的渐进式框架。这篇文章给大家介绍Vue仿手机qq的实例代码,需要的的朋友参考下吧
    2017-09-09
  • 详解vue express启动数据服务

    详解vue express启动数据服务

    本篇文章主要介绍了vue express启动数据服务,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue自定义指令directive的使用方法

    vue自定义指令directive的使用方法

    这篇文章主要介绍了vue自定义指令directive的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论