ホームページ > 記事 > ウェブフロントエンド > Vue 開発にスキャフォールディングは必要ですか?
Vue 開発にスキャフォールディングは必要ですか?
- 青灯夜游オリジナル
- 2020-11-20 15:52:3714824ブラウズ
Vue 開発にはスキャフォールディングは必要ありません。 Vue プロジェクトでは必ずしもスキャフォールディングを構築する必要はありません。cdn を直接使用して vue.js を導入することもできます。スキャフォールディングなしで静的ページを記述することも可能です。スキャフォールディングは単なる事前設定されたフレームワークです。必要に応じて、手動でのスキャフォールディング: まったく同じコード構造が機能します。
vue はプログレッシブ フロントエンド フレームワークであり、プログレッシブとは、使用中に必要な一連の外部リソースを導入できることを意味します。これは、独自のフレームワークを構築できることを意味します。vue-cli を使用しない場合は、独自の開発フレームワークを構築できます。vuex または vue-router が必要な場合は、npm でインストールしてプロジェクトにインポートするだけです。
Vue プロジェクトは必ずしもスキャフォールディングを構築する必要はありません。cdn を使用して直接 vue.js を導入することもできます。スキャフォールディングを構築せずに静的ページを記述することも可能です。スキャフォールディングは、事前に設定されたフレームワークにすぎません。必要に応じて、同じコード構造を持つスキャフォールドを手動で作成できます。
フレームワークを使用したくない場合は、CND を使用して導入できる vue.js を使用してプロジェクトを直接ビルドできます。
CDN では、ページ内に js ファイルと css ファイルを導入することで利用を開始できます。海外の比較的安定した 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
ケース 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:'add', amount:5})
},
reduce_act({commit}) {
commit({type:'reduce'})
}
},
modules: {
}
});
const app = new Vue({
el: '#app',
store: VuexStore,
template: '#tpl',
components: {
tip: {
computed: {
...Vuex.mapState(['count','num1','num2']),
// ...Vuex.mapGetters(['he'])代替了$store.getters.he
...Vuex.mapGetters(['he']),
},
template: '<div>{{count}}-{{num1}}-{{num2}}={{he}}</div>'
}
},
methods: {
// ...Vuex.mapMutations(['add'])代替了$store.commit('add')
// ...Vuex.mapMutations(['add','reduce']),
...Vuex.mapActions(['add_act', 'reduce_act']),
jia() {
// this.$store.commit({type:'add',amount:100})
// this.$store.dispatch('add_act');
this.add_act();
// this.add({amount:100});
},
jian() {
// this.$store.commit('reduce');
// this.$store.dispatch('reduce_act');
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) 「通信ストーム」の影響を軽減し、ネットワークアクセスの安定性を向上させます。
関連する推奨事項:プログラミング教育2020 フロントエンド vue インタビューの質問の概要 (回答付き) vue チュートリアル推奨事項: 2020 年最新の vue.js ビデオ チュートリアル 5 選プログラミング関連の知識の詳細については、
以上がVue 開発にスキャフォールディングは必要ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。