Vue Mobile Development Family Bucket

a command to take care of family barrels: npm install vue-router vue-resource vuex--save main.js Configuration:

import vue from ' Vue ' import vueresource from ' Vue-resource ' import vuerouter from ' vue-router ' import Vuex from ' Vuex ' im Port App from './app.vue ' Vue.use (vueresource) vue.use (vuerouter) vue.use (Vuex) New Vue ({  el: ' # App ',  render:h + H (APP)})

Other preprocessor sass/less, UI components, plugins are loaded according to project/demand preferences.

REM Adaptation: (index.html introduced)

!function(window) {/*Design Document Width*/    varDocwidth = 750; varDoc =window.document, Docel=doc.documentelement, Resizeevt= ' Orientationchange 'inchWindow? ' Orientationchange ': ' Resize '; varRecalc = (functionRefreshrem () {varClientWidth =docel.getboundingclientrect (). width; /*8.55: Less than 320px no longer shrinks, 11.2: larger than 420px no longer enlarge*/docEl.style.fontSize= Math.max (Math.min (clientwidth/docwidth), 11.2), 8.55) * 5 + ' px '; returnRefreshrem;    })(); /*add double screen id, Android 1*/Docel.setattribute (' Data-dpr ', Window.navigator.appVersion.match (/iphone/gi)? Window.devicepixelratio:1); if(/IP (HONE|OD|AD)/. Test (Window.navigator.userAgent)) {        /*Add iOS logo*/Doc.documentElement.classList.add (' iOS '); /*IOS8 above to add hairline style to HTML for special handling*/        if(parseint (Window.navigator.appVersion.match (/os (\d+) _ (\d+) _? ( \d+)?/) [1], >= 8) Doc.documentElement.classList.add (' Hairline '); }    if(!doc.addeventlistener)return; Window.addeventlistener (Resizeevt, Recalc,false); Doc.addeventlistener (' domcontentloaded ', Recalc,false);} (window);

# Mobile-click event 300ms delay
It is recommended to use the Fastclisk plugin, which is configured as follows in the Webpack portal file Main.js:

Const Fastclick = require (' Fastclick ');d ocument.addeventlistener (function  () {      False);

# Asynchronous Load component (take Ydui as an example)
When you package a build application, the Javascript package becomes very large and affects the page load. In order to improve efficiency, the components corresponding to different routes can be divided into different blocks of code, and the corresponding components are loaded when the route is accessed.
This can be achieved through the async component of Vue and the code splitting feature of Webpack:

Import vue from ' Vue '; import Vuerouter from' Vue-router '; Vue.use (vuerouter); Const router=NewVuerouter ({routes: [{path:'/xxx1 ', Component:resolve= = require (['./routers/xxx1.vue '], resolve)/*<== The main code is this*/}, {path:'/xxx2 ', Component:resolve= = require (['./routers/xxx2.vue '], resolve)/*<== The main code is this*/}]}); import App from'./app.vue '; Const app=NewVue ({router, render:v=V (APP)}). $mount (' #app ');

# Prompt in page switch loading
When the user's network is slow, it takes time to load the component asynchronously, which shows that the animation in load is relatively friendly. Easy to implement with Vue-router and Vuex:
First define a state (isloading) through Vuex:

 import vue from ' vue ' ;import Vuex from  ' Vuex ' ;const store  = new   Vuex.store ({state: {isloading:  false  " Span style= "COLOR: #000000" >}, mutations: {Updateloadingstatus (state, isloading) {State.isloadi        ng  = isloading; }}); const app  = new   Vue ({store, router , render:v  => ' #app ');  

 Next, change the isloading status through Vue-router's Beforeeach and Aftereach:Router.beforeeach (route, redirect, next) = {    /* Show load in animation */Store.commit (' Updateloadingstatus ', true); Next ();}); Router.aftereach (route =/* Hide load in animation */Store.commit (' Updateloadingstatus ', false);}); Finally, in App.vue, Show/Hide the animation in the load by isloading: <Template>    <Divstyle= "height:100%;"><!--Special Note: If the page structure uses yd-layout components, it is necessary to add height:100%; -        <DivV-show= "IsLoading">Load in</Div>        <Router-viewV-show= "!isloading"></Router-view>    </Div></Template><Scripttype= "Text/babel">Exportdefault{computed: {isloading () {return  This. $store. state.isloading}} }</Script>

Vue Mobile Development Family Bucket