Maison > Article > interface Web > Un échafaudage est-il nécessaire pour le développement de Vue ?

Un échafaudage est-il nécessaire pour le développement de Vue ?

青灯夜游original: 2020-11-20 15:52:3714761parcourir

Le développement de Vue ne nécessite pas d'échafaudage. Il n'est pas nécessaire de créer un échafaudage pour les projets Vue. Vous pouvez également utiliser directement cdn pour introduire vue.js. Il est également possible d'écrire des pages statiques sans échafaudage ; l'échafaudage n'est qu'un framework préconfiguré. un échafaudage manuellement. La même structure de code fonctionnera.

vue est un framework frontal progressif signifie que vous pouvez introduire une série de ressources externes dont vous avez besoin pendant l'utilisation. Cela signifie que vous pouvez créer votre propre framework. Si vous n'utilisez pas vue-cli, vous pouvez créer votre propre framework de développement. Si vous avez besoin de vuex ou de vue-router, installez-le simplement avec npm et importez-le dans le projet.

Les projets Vue n'ont pas nécessairement besoin de créer un échafaudage. Vous pouvez également utiliser directement cdn pour introduire vue.js. Il est également possible d'écrire des pages statiques sans créer d'échafaudage. L'échafaudage n'est qu'un framework préconfiguré. Si vous le souhaitez, vous pouvez créer manuellement un échafaudage avec la même structure de code.

Si vous ne souhaitez pas utiliser de framework, vous pouvez construire le projet directement avec vue.js, qui peut être introduit à l'aide de CND.

Recommandez plusieurs CDN relativement stables à l’étranger. Je n’en ai trouvé aucun qui soit meilleur en Chine. Il est toujours recommandé de les télécharger localement.

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

unpkg : https://unpkg.com/vue/dist/vue.js, restera cohérent avec la dernière version publiée par npm.

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

Grâce au CDN, vous pouvez commencer à l'utiliser en introduisant les fichiers js et css sur la page.

Cas 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>

Quant au cas du routeur : https://github.com/vuejs/vue-router/tree/dev/examples

Informations détaillées :

Le nom complet du CDN est Content Delivery Network, qui est un réseau de distribution de contenu. CDN est un réseau virtuel intelligent construit sur le réseau existant. Il s'appuie sur des serveurs périphériques déployés à divers endroits et utilise l'équilibrage de charge, la distribution de contenu, la planification et d'autres modules fonctionnels de la plate-forme centrale pour permettre aux utilisateurs d'obtenir le contenu dont ils ont besoin à proximité et réduire la congestion du réseau. Améliorer la vitesse de réponse d’accès des utilisateurs et le taux de réussite. Les technologies clés du CDN incluent principalement la technologie de stockage et de distribution de contenu.

CDN a les fonctions principales suivantes :

(1) Économisez la bande passante du réseau fédérateur et réduisez les besoins en bande passante

(2) Fournit une accélération côté serveur pour résoudre le problème de ; problème de surcharge du serveur de trafic utilisateur ;

(3) Les fournisseurs de services peuvent utiliser la technologie Web Cache pour mettre en cache localement les pages Web et les objets auxquels les utilisateurs ont accédé, de sorte que l'accès aux mêmes objets n'ait pas besoin d'occuper la bande passante d'exportation de l'épine dorsale et améliorer l'utilisateur Le temps requis pour accéder aux pages Internet

(4) peut surmonter le problème de la répartition inégale des sites Web et peut réduire le coût de construction et de maintenance des sites Web ; >(5) réduire l'impact des « tempêtes de communication » et améliorer la stabilité de l'accès au réseau.

Recommandations associées :

Résumé des questions d'entretien Front-end Vue 2020 (avec réponses)
tutoriel vue Recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020
Pour plus de connaissances liées à la programmation, veuillez visiter :

Enseignement de la programmation

! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Existe-t-il un plugin d'image carrousel pour vue.js ?Article suivant：Existe-t-il un plugin d'image carrousel pour vue.js ?

Articles Liés

Voir plus