Ist ein Gerüst für die Vue-Entwicklung notwendig?-View.js-php.cn

Ist ein Gerüst für die Vue-Entwicklung notwendig?

青灯夜游

Freigeben： 2020-11-20 15:52:37

Original

14822 Leute haben es durchsucht

Vue-Entwicklung erfordert kein Gerüst. Es ist nicht erforderlich, ein Gerüst für Vue-Projekte zu erstellen. Sie können auch statische Seiten ohne Gerüst erstellen Ein Gerüst manuell erstellen. Die exakt gleiche Codestruktur funktioniert.

Ist ein Gerüst für die Vue-Entwicklung notwendig?

vue ist ein progressives Front-End-Framework, das bedeutet, dass Sie während der Nutzung eine Reihe externer Ressourcen einführen können. Das bedeutet, dass Sie Ihr eigenes Framework erstellen können, wenn Sie Vue-Cli nicht verwenden. Wenn Sie Vuex oder Vue-Router benötigen, installieren Sie es einfach mit npm und importieren Sie es in das Projekt.

Vue-Projekte müssen nicht unbedingt ein Gerüst erstellen. Sie können cdn auch direkt zum Einführen von vue.js verwenden. Es ist auch möglich, statische Seiten zu schreiben, ohne ein Gerüst zu erstellen. Gerüst ist lediglich ein vorkonfiguriertes Framework. Wenn Sie möchten, können Sie manuell ein Gerüst mit derselben Codestruktur erstellen.

Wenn Sie kein Framework verwenden und das Projekt direkt mit vue.js erstellen möchten, können Sie es mit CND einführen.

Ich empfehle mehrere relativ stabile CDNs im Ausland. Ich habe keines gefunden, das in China besser ist. Es wird dennoch empfohlen, sie lokal herunterzuladen.

Staticfile CDN (Inland): https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg: https://unpkg.com/vue/dist/vue .js bleibt mit der neuesten von npm veröffentlichten Version konsistent.

cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

Einfach über CDN JS- und CSS-Dateien auf der Seite einführen. Loslegen.

Fall 1: vuex

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
</head>
<div id="app"></div>
<body>
    <script type="text/Template" id="tpl">
        <div>
            <tip></tip>
            <input type="button" value="+" @click="jia" />
            <input type="button" value="-" @click="jian" />
        </div>
    </script>
    <script>
        const VuexStore = new Vuex.Store({
            state: {
                count: 0,
                num1: 1,
                num2: 2
            },
            mutations: {
                add(state, arg) {
                    state.count += arg.amount;
                },
                reduce(state) {
                    state.count --;
                }
            },
            getters: {
                he(state,getters) {
                    return state.count + state.num1 + state.num2
                },
                add5(state) {
                    return state.count + 0
                }
            },
            actions: {
                add_act({commit}) {
                    commit({type:&#39;add&#39;, amount:5})
                },
                reduce_act({commit}) {
                    commit({type:&#39;reduce&#39;})
                }
            },
            modules: {

            }
        });
        const app = new Vue({
            el: &#39;#app&#39;,
            store: VuexStore,
            template: &#39;#tpl&#39;,
            components: {
                tip: {
                    computed: {
                        ...Vuex.mapState([&#39;count&#39;,&#39;num1&#39;,&#39;num2&#39;]),
                        // ...Vuex.mapGetters([&#39;he&#39;])代替了$store.getters.he
                        ...Vuex.mapGetters([&#39;he&#39;]),
                    },
                    template: &#39;<div>{{count}}-{{num1}}-{{num2}}={{he}}</div>&#39;
                }
            },
            methods: {
                // ...Vuex.mapMutations([&#39;add&#39;])代替了$store.commit(&#39;add&#39;)
//                ...Vuex.mapMutations([&#39;add&#39;,&#39;reduce&#39;]),
                ...Vuex.mapActions([&#39;add_act&#39;, &#39;reduce_act&#39;]),
                jia() {
//                    this.$store.commit({type:&#39;add&#39;,amount:100})
//                    this.$store.dispatch(&#39;add_act&#39;);
                        this.add_act();
//                    this.add({amount:100});
                },
                jian() {
//                    this.$store.commit(&#39;reduce&#39;);
//                    this.$store.dispatch(&#39;reduce_act&#39;);
                        this.reduce_act();
//                    this.reduce();
                }
            }
        })
    </script>
</body>
</html>

Nach dem Login kopieren

Was den Router-Fall betrifft: https://github.com/vuejs/vue-router/tree/dev/examples

Erweiterte Informationen:

Der vollständige Name des CDN ist Content Delivery Network, also ein Netzwerk zur Verbreitung von Inhalten. CDN ist ein intelligentes virtuelles Netzwerk, das auf dem vorhandenen Netzwerk aufbaut. Es basiert auf an verschiedenen Orten bereitgestellten Edge-Servern und nutzt die Lastausgleichs-, Inhaltsverteilungs-, Planungs- und andere Funktionsmodule der zentralen Plattform, um Benutzern den Zugriff auf die Inhalte zu ermöglichen, die sie in der Nähe benötigen Reduzieren Sie die Überlastung des Netzwerks. Verbessern Sie die Reaktionsgeschwindigkeit und Trefferquote des Benutzerzugriffs. Zu den Schlüsseltechnologien von CDN gehören hauptsächlich Technologien zur Speicherung und Verteilung von Inhalten.

CDN hat die folgenden Hauptfunktionen:

(1) Backbone-Netzwerkbandbreite sparen und Bandbreitenbedarf reduzieren

(2) Bereitstellung einer serverseitigen Beschleunigung, um das durch große Benutzerbesuche verursachte Serverüberlastungsproblem zu lösen

(3) Dienstanbieter können die Web-Cache-Technologie verwenden, um Webseiten und Objekte, auf die Benutzer zugegriffen haben, lokal zwischenzuspeichern, sodass der Zugriff auf dieselben Objekte nicht die Ausgangsbandbreite des Backbones belegt und die entsprechenden Zeitanforderungen für den Zugriff von Benutzern auf Internetseiten verbessert werden

( 4) kann das Problem der ungleichmäßigen Verteilung von Websites lösen und die Kosten für den Aufbau und die Wartung der Website selbst senken

(5) Reduzieren Sie die Auswirkungen des „Kommunikationssturms“ und verbessern Sie die Stabilität des Netzwerkzugriffs. 🔜 Besuchen Sie:

Programmierunterricht

! !

Das obige ist der detaillierte Inhalt vonIst ein Gerüst für die Vue-Entwicklung notwendig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!