How to use nested vue in to write a single page in the app H5

This paper describes a mobile terminal. In order to avoid the emergence of various mobile end compatible weird bug, it can not uphold the complex syntax do not, try to use the most basic grammar. Available accustomed to a variety of children's shoes ES6 grammar, writing native is really a headache, plus a variety of leadership reminder period, is certainly a variety of heart irritability. Here are about, how to write in the H5 transport vue, the nested use app.

First introduced vue CDN, remember to picking a vue.js. downloaded, do not use htpp, to avoid some modules because the card lead, the page loads confusion.

<script src="./js/vue.min.js"></script>

new view ({

el: "#app",

data:function(){}

})

　　2. You certainly want to use a uI library, I recommend that a vant. Tell me what network to use. Some need vant.Toast. Andrews problem Loading not often appear 6.0. To see whether the company is fully compatible.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>

3. Get back data ajax suffice. To download a local bar.

<script src="./js/jquery-2.0.0.min.js"></script>

　　4. If the mobile terminal is a layout of a small percentage, display: flex, compatible do this. rem also can be used.

// remember the UI size / actual value = 100 rem. The default UI size 750px. Please use the phone less than 750px percentage. Like vivio6, compatibility issues often appear oppo low version of the phone. But now, most mobile phones have been applicable, to see whether the company is fully compatible. 
<Script> 
        var fontSize = 0; 
        (function (DOC, win) { 
            // get html node and change events and change the font size screen 
            const docEl = doc.documentElement, 
                resizeEvt = 'orientationChange' in window 'orientationChange': 'of a resize? ', 
                Recalc = function () { 
                    const = docEl.clientWidth the clientWidth; 
                    IF (! the clientWidth) return; // not exclude width value 
                    IF (the clientWidth> = 750) { 
                        docEl.style.fontSize =' 100px '; 
                    } the else { 
                        docEl.style.
                    }
                };

            function fontSizeFun() {
                var size = 0;
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return; //排除宽度没值
                if (clientWidth >= 750) {
                    size = 100;
                } else {
                    size = 100 * (clientWidth / 750);
                }
                return size;
            }
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener("DOMContentLoaded", recalc, false);
            fontSize = fontSizeFun();
            win.addEventListener(resizeEvt, function () {
                fontSize = fontSizeFun();
            }, false);
            doc.addEventListener("DOMContentLoaded", function () {
                fontSize = fontSizeFun();
            }, false);
        })(document, window);
    </script>

5. ES6 compatible processing grammar.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

　　6. No use vue-router, is used window.location.href jump, more blunt. There is a way to see online:

Then index.html rendering two pages A and B through the router-view. A, B as its components. Further app of a nested H5, is also jumping through window.location.href or a label. You can not download the browser, but not moving end. I checked a lot of documents, and there is no good solution, app can open the file by calling the local access plug, nested H5 temporarily no good treatment options.

How to use nested vue in to write a single page in the app H5

Guess you like