In order to increase the development efficiency, the small program uses MPVUE as a framework to develop with the UI library of iView small program. The initial development was using the official scaffolding in the CLI, but there were some drawbacks. First, directory structures are not particularly convenient. For each page created, create index.vue and main.js in a folder. However, official scaffolding does not support small program subcontracting. So mpvue-Entry was introduced to unify page configuration into page.js, and also to enable mpvue to support subcontracting. The authors put together a MPvue-QuickStart that can be used directly.

The following is the relevant website:

mpvue：http://mpvue.com/

mpvue-quickstart：https://github.com/F-loat/mpvue-quickstart

mpvue-entry：https://github.com/F-loat/mpvue-entry

iview：https://weapp.iviewui.com/

Mpvue related plug-in summary: https://github.com/mpvue/awesome-mpvue

# # Tips: 1) All pages are configured in page.js. If you want to configure the home page ~ “the home page defaults to the first item in page.js. It is overridden by the configuration in main.js (you can add your home page to the relevant configuration in main.js pages) and supports hot updates to new pages, eliminating the need to restart the page. PS: Read the document before you write something. Read the document first if you have any problems. Don’t get into the habit of asking (to yourself)

2) After introduction, it is easy to configure whether the page needs to be subcontracted or compiled. Some issues need to be paid attention to when subcontracting. Tab-related pages must be placed in the main package, and the subcontracted directory should be at the same level as the Pages folder. After subcontracting, absolute paths should be used to prevent related pages from being found. As shown, three packages are generated: Pages, packageA, and packageB. On how to implement mpvue subcontracting: https://github.com/Meituan-Dianping/mpvue/issues/590

Before subcontracting, due to the limitation of project size, I only introduced the required files into the static folder, and then introduced and used in the relevant configuration of the page. (The maximum support after the small program update is 8M, and the page path can be up to 10 layers)

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount(a)export default {
  config: {
    navigationBarTitleText: 'Edit TAB',
    navigationBarTextStyle: 'white',
    navigationBarBackgroundColor: '#4F87E4',
    usingComponents: {
      'i-tag': '/static/iview/tag/index'.'i-toast': '/static/iview/toast/index'}}}Copy the code

At that time, toast method was hung under VUE for convenience, but there was a problem in the following code after subcontracting was set. Before the subcontract:

const { $Toast } = require('.. /static/iview/base/index')
Vue.prototype.$Toast = $Toast
Copy the code

After the subcontractor:

const { $Toast } = require('.. /static/iview/base/index.js') // app-only
Vue.prototype.$Toast = $Toast // app-only
Copy the code

Above you can see a comment app-only at the end of the code. Used to specify code specific to main.js. Didn’t understand at the time)