Vue 開発にスキャフォールディングは必要ですか?-Vue.js-php.cn

Vue 開発にスキャフォールディングは必要ですか?

青灯夜游

リリース： 2020-11-20 15:52:37

オリジナル

14828 人が閲覧しました

Vue 開発にはスキャフォールディングは必要ありません。 Vue プロジェクトでは必ずしもスキャフォールディングを構築する必要はありません。cdn を直接使用して vue.js を導入することもできます。スキャフォールディングなしで静的ページを記述することも可能です。スキャフォールディングは単なる事前設定されたフレームワークです。必要に応じて、手動でのスキャフォールディング: まったく同じコード構造が機能します。

Vue 開発にスキャフォールディングは必要ですか?

vue はプログレッシブフロントエンドフレームワークであり、プログレッシブとは、使用中に必要な一連の外部リソースを導入できることを意味します。これは、独自のフレームワークを構築できることを意味します。vue-cli を使用しない場合は、独自の開発フレームワークを構築できます。vuex または vue-router が必要な場合は、npm でインストールしてプロジェクトにインポートするだけです。

Vue プロジェクトは必ずしもスキャフォールディングを構築する必要はありません。cdn を使用して直接 vue.js を導入することもできます。スキャフォールディングを構築せずに静的ページを記述することも可能です。スキャフォールディングは、事前に設定されたフレームワークにすぎません。必要に応じて、同じコード構造を持つスキャフォールドを手動で作成できます。

フレームワークを使用したくない場合は、CND を使用して導入できる vue.js を使用してプロジェクトを直接ビルドできます。

海外の比較的安定した CDN をいくつかお勧めします。中国ではこれより優れた CDN が見つかりませんでした。現時点では、ローカルにダウンロードすることをお勧めします。

静的ファイル CDN (国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.js

#unpkg: https://unpkg.com/vue/dist/vue.js は、npm によってリリースされた最新バージョンとの一貫性を保ちます。

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

CDN では、ページ内に js ファイルと css ファイルを導入することで利用を開始できます。

ケース 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>

ログイン後にコピー

ルーターの場合: https://github.com/vuejs/vue-router/tree/dev/examples

拡張情報:#CDN の正式名は Content Delivery Network で、コンテンツ配信ネットワークです。 CDN は、既存のネットワーク上に構築されたインテリジェントな仮想ネットワークであり、さまざまな場所に配置されたエッジサーバーに依存し、中央プラットフォームの負荷分散、コンテンツ配信、スケジューリングなどの機能モジュールを使用して、ユーザーが必要なコンテンツを近くで入手できるようにします。ネットワークの混雑を軽減し、ユーザーのアクセス応答速度とヒット率を向上させます。 CDN の主要テクノロジーには、主にコンテンツの保存および配信テクノロジーが含まれます。

CDN には次の主な機能があります:

(1) バックボーンネットワークの帯域幅を節約し、帯域幅要件を削減します;

(2) サーバー側のアクセラレーションを提供して、問題を解決します。ユーザートラフィック大規模なサーバー過負荷の問題;

(3) サービスプロバイダーは Web キャッシュテクノロジを使用して、ユーザーがアクセスした Web ページとオブジェクトをローカルにキャッシュできるため、同じオブジェクトへのアクセスがエクスポート帯域幅を占有する必要がなくなります。インターネットページにアクセスするための対応する時間要件;

(4) Web サイトの偏在の問題を克服し、Web サイトの構築と保守のコストを削減できます;

(5) 「通信ストーム」の影響を軽減し、ネットワークアクセスの安定性を向上させます。