Brief introduction:

The MPVue framework is the best choice for those who have never been exposed to small programs and want to try small program development. Mpvue supports vue. js syntax and building tool system from the bottom layer, and combines with relevant UI component library, it can efficiently realize small program development

Preface:

This article tells how to build a complete small program project framework, because it is the first time to use, there is no perfect place please big guy correct.

Construction content includes:

1. Use SCSS syntax: rely on sass-loader, Node-sass

2. Use routing like VUE: rely on plugins mpvue-Entry and mpvue-router-patch

3. Use ZanUI: GitHub UI Component Library for the likes team

4. Use VUEX for state management

5. Use Flyio for data interaction: GitHub address

Project Structure:



Explanation:

1. Use SCSS syntax

1. Install dependencies

cnpm install node-sass sass-loader –save-dev

For unknown reasons, Node-Sass often fails to be installed, so CNPM is the best way to install it

2, add lang= “SCSS” to the style node in the.vue file, so that you can use sass to develop, no need to configure loader in webpack.base.config.js. Webpack automatically recognizes.scSS files as well as SCSS code in.vue.

Use routing like VUE

Mpvue init mpvue/mpvue-quickstart my-project: configures the main.js file for each page. Therefore, can we transform the way of using routing like VUE? The answer is yes, we need to use mpVUe-Entry and MPvue-router-patch plug-ins (centralized page configuration, automatic generation of entry files of each page, optimization of directory structure, support hot update of new pages) and

Mpvue-entry: centralized page configuration, automatically generates entry files for each page, optimizes directory structure, and supports hot update of new pages

Mpvue-router-patch: indicates that vue-router-compatible routes are used in MPvUE

1. Install dependencies

cnpm install mpvue-entry –save-dev

cnpm install mpvue-router-patch –save

Create router folder and router.js file under project SRC

      

3. Import the main.js file under SRC

import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'

Vue.use(MpvueRouterPatch)Copy the code

Note: export default {} of main.js cannot be empty, otherwise app.json file will not be generated during compilation


4. Modify the webpack.base.conf.js configuration file

const MpvueEntry = require('mpvue-entry')

module.exports = {
    entry:MpvueEntry.getEntry('./src/router/router.js'),... }Copy the code


Configure the router.js file

// home module.exports = [{path: // home module.exports = [{path:]'pages/index',
    name: 'Index',
    config: {
        navigationBarTitleText: 'Article Details'// Introduce UI components, which we'll talk about later :{"zan-button": ".. /dist/btn/index"
        }
    }
}, {
    path: 'pages/list/list',
    name: 'List',
    config: {
        navigationBarTitleText: 'list details'}}]Copy the code



Three, use applets UI components

1. Clone the UI component library to the local PC

2. Copy the dist directory shown above to the output directory of the MPVue project



Add the UI component to the router.js file

module.exports = [{
    path: 'pages/index',
    name: 'Index',
    config: {
        navigationBarTitleText: 'Article Details', // Introduces the UI component usingComponents:{// Component name and reference path"zan-button": ".. /dist/btn/index"}}}]Copy the code

4. Use UI components in your pages

<template>
    <div class="index">
        <zan-button type="primary" size="small"</zan-button> </div> </template>Copy the code

5, small program to use a custom component: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

ZanUI component library use explanation: https://github.com/youzan/zanui-weapp/blob/dev/README.md

Iv. Use VUEX for state management

1, install,

cnpm install vuex –save

2, import (main.js file)

impotr store from ‘./vuex/index’

Vue. Prototrype.$store = store// Hang to Vue prototype

5. Use Flyio for data interaction

1, install,

cnpm install flyio –save

2, import (main.js file)

Const Fly = require(“flyio/dist/ NPM /wx”)//

const fly = new Fly

Vue. Prototrype.$fly = fly// Hang to Vue prototype

3, use,

           add(){// Perform the interface request this in the add method.$fly.get('http://******/user? id=133')
                    .then(function(res) {// Request success console.log('res',res);
                    })
                    .catch(function(err) {// Request failed console.log('err',err);
                    });
            }    Copy the code