小程序框架mpvue中每个页面都需要创建main.js,为了解决这个重复的工作配置mpvue-entry

最近工作中使用到了mpvue框架搭建小程序,由于mpvue是基于vue.js的框架,所以上手也很简单,但是还有一些地方用起来不顺手。

初始化一个 mpvue 项目

按照官网提供的步骤执行下去就可以了

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli@2.9

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

将服务跑起来之后开始写业务,一开始写的很顺畅,但是当我新建一个page页面就卡壳了,我发现在pages里面添加一个vue文件+app.json里面配置路径这个原生小程序的配置路径的方式在mpvue里面不成立,必须要在页面文件夹里创建一个main.js,它的作用就是 打包入口,完成 vue 的实例化

import Vue from 'vue';

import App from './index';

const app = new Vue(App);

app.$mount();

可是在实际项目中如果每个页面都要创建一个main.js,这个工作量繁琐又多余的,所以我查到了不需要创建main.js方法,这里使用的是mpvue-entry插件,废话不多说,直接贴代码

先下载mpvue-entry
npm install mpvue-entry -s

找到build/webpack.base.conf.js文件

const MpvueEntry = require('mpvue-entry') // 引入mpvue-entry

接着找到红框里的代码删掉

1588142445085.jpg

我们到src文件夹新建一个 router.js 用于管理所有的路由

module.exports = [
  {
    path: '/pages/index/index',
    config: {
      navigationBarTitleText: '提现'
    }
  },
  {
    path: '/pages/cash_list/index',
    config: {
      navigationBarTitleText: '提现记录'
    }
  }
]

然后再回到build/webpack.base.conf.js文件下使用MpvueEntry.getEntry的方法引入所有的路径

1588142657958.jpg

最后找到plugins新增mpvue-entry这个插件
1588142782024.jpg

重新启动服务后就不用创建main.js了,所有的路径都在router.js里面统一管理就行了。

156 声望
17 粉丝
0 条评论
推荐阅读
vue移动端项目骨架屏的实现
从图里看到vue页面从打开到加载完成是有一段白屏的时间的,那白屏的加载体验对于首次访问的用户来说是难以接受的,我们可以使用尺寸稳定的骨架屏,来辅助实现真实模块占位和瞬间加载。

familyAboveAll7阅读 5.9k评论 3

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 13.4k评论 7

探索小程序底层架构原理
双线程架构在这之前,我们先来思考一个问题,小程序在架构上为什么会选择双线程?为什么是双线程?加载及渲染性能小程序的设计之初就是要求快速,这里的快指的是加载以及渲染。目前主流的渲染方式有以下3种:Web...

南玖16阅读 2.3k评论 2

封面图
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.6k

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.1k评论 7

一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.5k评论 3

你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
156 声望
17 粉丝
宣传栏