Recently, I used the MPVue framework to build a small program. Because MPVue is based on the Vue.js framework, it is also very simple to get started, but there are some places that are not smooth to use.

Initialize an MPVue project

Just follow the steps provided on the website

$node.js $node-v v8.9.0 $NPM -v 5.6.0 # 2 Due to reasons known to all, can consider to switch the source to the taobao source $NPM registry https://registry.npm.taobao.org/ # 3. $NPM install --global [email protected] # 4 install vue-cli # $NPM install --global [email protected] # 4 $vue init mpvue/mpvue-quickstart my-project # 5 $vue init mpvue/mpvue-quickstart my-project # 5 $CD my-project $NPM install $NPM run dev $CD my-project $NPM install $NPM run dev

After running the service, I started to write the business. At first, I wrote it smoothly, but when I created a new page, I got stuck. I found that adding a vue file in Pages +app.json to configure the path of the native applet did not work in MPVue. You must create a main.js file in the pages folder, which will package the entry and instantiate the Vue

import Vue from 'vue';

import App from './index';

const app = new Vue(App);

app.$mount();

However, in a real project, if you need to create a main.js method for each page, it would be tedious and unnecessary, so I found that you don’t need to create a main.js method. Here, you use the mpvue-entry plugin

First download mpvue-entry NPM install mpvue-entry-s

Find the build/webpack base. Conf. Js file

Const mpvueEntry = require('mpvue-entry') // introduce mpvue-entry

And then go to the code in the red box and delete it

Let’s go to the SRC folder and create a new router.js to manage all the routes

Module. exports = [{path: '/pages/index/index', config: {path: '/pages/index/index'}}, {path: '/pages/cash_list/index', config: {navigationBartitleText: 'cash_list'}}]

Then return to build/webpack. Base. Conf. Js file. Use MpvueEntry getEntry method is introduced into all of the path

Finally, find plugins to add mpvue-entry

After restarting the service, instead of creating main.js, all paths will be managed in router.js.