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