preface

Author use spare time development, maintenance, download please give a praise or collection

If you have any questions, leave a message after 5 weeks and you will be answered in time

Plug-in communication QQ group: 736073015

Doing a new project requires common code, such as

  • Login, Registration, Password retrieval, User Protocol, 404 page (template)
  • Global Routing Guard (Routing Configuration)
  • Request encapsulation (Request encapsulation)
  • Centralized API management
  • Introducing dependent UI libraries (color-UI, uview-UI)
  • Flex common layout CSS,
  • Configuration of the subcontract
  • Utils Common utility functions
  • Global filters
  • Configuration Vuex (store)
  • Communication between unrelated components.
  • Use easyCOM mode to allow you to use directly without importing components (load on demand)
  • Continue to update

In order to be more productive (and frankly lazy), I decided to use these as basic templates for my next project

rendering

1. Global route guard

(1) Route interception

Uni-simple – Router Routing, interception, the most elegant solution

(2) Route configuration

With vue. Config. js and uni-read-pages, you can read all the configuration of pages

2. Request encapsulation

Apply to one project multiple domain name request, seven niuyun picture upload, local server picture upload, support Promise.

3, API centralized management

API centralized management; In order to simplify the principle of clean logic code amount, call API like function, make code separation, create API function in the API directory, and encapsulate the method of data type verification returned by the interface, mount into the vue prototype, page through this.$apis. ApiName () call

4, the subcontract

Sub directory subcontracting Management Due to the limitation of wechat applets, the total package size of the uploading and publishing mechanism cannot be greater than 2m. Therefore, if the project exceeds the limit, subcontracting processing should be performed in Page. json, and the configuration of subcontracting processing should be consistent with the Pages directory

5. Configure vuEX

You don’t need to introduce every sub-store module

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
const files = require.context("./modules".false./\.js$/);
let modules = {
	state: {},
	mutations: {},
	actions: {}}; files.keys().forEach((key) = > {
  Object.assign(modules.state, files(key)["state"]);
  Object.assign(modules.mutations, files(key)["mutations"]);
  Object.assign(modules.actions, files(key)["actions"]);
});
const store = new Vuex.Store(modules);
export default store;
Copy the code

The page uses Vuex

import { mapState,mapActions } from 'vuex'; computed: { ... mapState(['userInfo'])}methods: {
			...mapActions(['getUserInfo'])}Copy the code

Global filters

Main.js introduces filters, using the following

{{shop.shopAddress|autoAddPoints}}
Copy the code

7. Communication between unrelated components => Event car

The basic principle of the event car is to create a new Vue object within the prototype object of the Vue for this project, which is specifically responsible for communication between unrelated, cross-level components

Main.js declares the event bus

Vue.prototype.$bus = new Vue() // Event Bus is used for communication between unrelated components.
Copy the code

A component listener ($ON)

/ / onload
 this.$bus.$on('updateChecked'.this.updateChecked)

/ / the methods
updateChecked(index){
 	console.log('I've got the index of the cross-level component.',index)
 }
Copy the code

Component B triggers ($emit)

Component B triggers component A’s updateChecked update to pass the index value to component A

 this.$bus.$emit('updateChecked', index);
Copy the code

Download the source code

Q&A

1 Cannot run, console error, please install dependency

npm install

Updates continue…

If you import source code or learning process have any problems, you can add me QQ: 392716797. We learn together and make progress together. Front end learning big guy group 493671066, many beauties. Get in the old driver. There’s no time to explain.

Author related articles

Decompile to get any micro channel applets source code – see this is enough

Zero base build profit meituan ele. me coupon CPS small program (attached source code)

5 minutes to achieve wechat cloud mini program payment function (source code included)