webpackを使わずにvueをコンパイルする方法を詳しく解説

vue.js を使用するプロセスでは、vue.js の導入と使用がより便利になるように、Webpack のパッケージ化とコンパイルを必要とするいくつかの操作がよく見られます。ただし、一部の開発者は、パッケージ化やコンパイルにあまり労力をかけずに、vue.js を直接使用することを好みます。では、この要件はクリアできるでしょうか?答えは「はい」です。

1. vue.js の導入

webpack でコンパイルせずに、vue.js をプロジェクトに直感的に導入する必要があります。これは CDN を通じて導入できます。次のコードを HTML に直接追加できます:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

プロジェクトの要件と vue.js のバージョンに応じてインポート パスを変更する必要があることに注意してください。番号。

これで、vue.js を喜んで使い始めることができます。

2. コンポーネントの使用

vue.js を使用する場合、コンポーネントを定義することでプロジェクトを複数の再利用可能な部分に分割できます。 Webpack でコンパイルせずにコンポーネントを使用することもできます。

コンポーネントを HTML ファイルで直接定義して導入できます。例:

<my-component></my-component>

<script>
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

new Vue({
  el: '#app'
})
</script>

現時点では、my-component という名前のコンポーネントを定義し、登録しています。 Vue.component 経由で。 HTML ファイルでは、このコンポーネントを直接使用できます。

簡単に言えば、グローバル コンポーネントを HTML ファイルに登録して使用できます。

3. 単一コンポーネント ファイル

Webpack でコンパイルせずに HTML ファイルでコンポーネントを直接定義することもできますが、プロジェクトが複雑になるとコンポーネントの数が膨大になることがよくあります。このアプローチはメンテナンスや再利用には役に立ちません。現時点では、各コンポーネントを vue ファイルに個別に記述し、<script> タグを通じてコン​​ポーネントを導入できます。

たとえば、hello-world.vue という名前のコンポーネント ファイル:

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script>
export default {
  data() {
    return {
      name: 'world'
    }
  }
}
</script>

次に、このコンポーネントを次の方法で導入して使用できます:

  


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>


<script>
new Vue({
  el: '#app'
})

はこのコンポーネントを喜んで使用できます。

4. CSS スタイル

単一コンポーネント ファイルの使用時にスタイルの問題が発生した場合は、従来の <style> タグを適用してスタイルを追加するだけで十分です。

たとえば、hello-world.vue コンポーネントに次のスタイルを追加できます。

<style>
div {
  color: green;
}
</style>

つまり、多くのチュートリアルでは vue が使用されていますが、 .js の導入 webpack の使用が必要になることがよくありますが、開発者にとっては、webpack を使用せずに vue.js を喜んで使用できます。

以上がwebpackを使わずにvueをコンパイルする方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。