記事ディレクトリ
基本的な使い方
vue は先進的なフレームワークであり、他のコードに違反することなくプロジェクト内でローカルに使用できることを私たちは知っています。
vue の最大の役割は、仮想 dom を使用して開発者を dom の複雑な操作から解放し、開発者がデータ処理のロジックにより集中できるようにすることです。
インストール：npm i vue
あとはwebpackのentry jsにvueを導入して利用するだけです。
import {
createApp} from "vue"
const app = createApp({
template: "<h2>Hello World</h2>"
})
app.mount("#app")
上記のコードを構築して実行した後、Web ページに何の効果もないことがわかります。なぜ？これはインポートされた vue js ファイルに関連しています。
警告メッセージは、現在のオペレーティング環境がテンプレート モジュール オプションをサポートしていないことを示しており、vue/dist/vue.esm-bundler.jsパッケージを手動でインポートすることをお勧めします。
Vue の異なるビルド バージョン
import import vue、具体的に何を導入するのでしょうか?
node_module フォルダーを開いて、index.js を確認します。現在のビルド環境に応じて、異なるビルド バージョンの vue js ファイルがインポートされることがわかります。
dist ディレクトリを開いて、vue が提供するすべてのビルド バージョンを表示します。
ビルドバージョンの解像度
vue(.runtime).global(.prod).js：
- ブラウザ経由で
vue(.runtime).esm-browser(.prod).js：
- ネイティブ ES モジュールを介してインポートして使用するために使用されます (ブラウザー内で
vue(.runtime).esm-bundler.js：
- webpack、rollup、parcel などのビルド ツールの場合。
- ビルド ツールのデフォルトは vue.runtime.esm-bundler.js です。
- テンプレートテンプレートを解析する必要がある場合は、vue.esm-bundler.js を手動で指定する必要があります。
vue.cjs(.prod).js：
- サーバー側のレンダリングは次のように使用します。
- require() 経由で Node.js で使用します。
ランタイム + コンパイラー vs ランタイムのみ
vue には非常に多くのビルド バージョンがあり、主にランタイム + コンパイラー バージョンとランタイムのみのバージョンの 2 つのカテゴリに分類されます。
- ランタイム + コンパイラー: テンプレート テンプレート用にコンパイルされたコードが含まれます。これはより完全ですが、サイズも大きくなります。
- ランタイムのみ: 比較的小さいテンプレート バージョン用にコンパイルされたコードは含まれません。
上記の Webpack は、コンパイラを使用せず、デフォルトでオペレーティング環境のバージョンのみをインポートするため、パッケージ化は成功しますが、表示のためにブラウザにレンダリングすることができず、ブラウザは警告を発行します。
したがって、コンパイラを使用してビルド バージョンを手動で指定する必要があります。
import {
createApp} from 'vue/dist/vue.esm-bundler.js'
再度ビルドすると、hello world がブラウザにレンダリングされていることがわかります。
webpack は SFC ファイルをビルドします
Vue の開発中、DOM 要素を記述するには 3 つの方法があります。
- 方法 1: render 関数の方法。h 関数を使用してレンダリングされたコンテンツを書き込みます。
- 方法 2: テンプレート テンプレートの方法。
- 方法 3: .vue ファイルのテンプレートを使用してテンプレートを書き込みます。
これら 3 つの方法には、インポートされた Vue ビルド パッケージの要件が異なります。
最初の方法では、 h 関数は仮想ノード、つまり Vnode ノードを直接返すことができるため、必要なのは vue のランタイムのみです。ただし、後の 2 つはテンプレート モジュールを使用するため、vue のコンパイラ モジュールも使用されます。
上記のケースは 2 番目の開発方法ですが、実際の開発では **SFC (シングルファイル コンポーネント)** を使用することがほとんどです。vue には .vue ファイルがあります。
sfc メソッドを使用して vue を導入すると、Webpack バージョンを手動でインポートする必要がなく、直接インポートできます。form "vue"
vscode には、sfc ファイルのサポートを提供するプラグインもあります。
- プラグイン 1: Vetur、Vue2 開発以来使用されている VSCode は Vue プラグインをサポートします。
- プラグイン 2: Volar、公式に推奨されるプラグイン (公式 VSCode プラグインは将来、Volar に基づいて開発される予定です)。
vueローダー
パッケージ化されたエントリ ファイル内の .vue ファイルを参照しますが、webpack はそれを解析できないため、対応するローダーが必要ですvue-loader
。npm i vue-loader -D
注: vue-loader を設定した後、そのプラグイン VueLoaderPlugin も追加する必要があります。
const {
VueLoaderPlugin } = require("vue-loader")
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: ["vue-loader"]
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
グローバル識別構成 vue2 と dev-tools
コンソールに別の警告があることがわかります。
この警告では、2 つの変数をグローバルに設定する必要があります。__VUE_OPTIONS_API__``__VUE_PROD_DEVTOOLS__
GitHub のドキュメントには、手順が記載されています:
1 つは Vue のオプション API を使用すること、もう 1 つは運用モードで devtools ツールをサポートするかどうかです。これらにはすべてデフォルト値がありますが、手動で設定することを強くお勧めします。
options api これは、vue3 から vue2 への互換性対策です。プロジェクトで options API が使用されていない場合、つまり vue2 が使用されていない場合、Webpack はパッケージ化時にツリーシェイクを実行し、不要な vue2 コア コードが削除されます。
webpack のデフォルト プラグインのdefinePlugin でグローバル変数を手動で設定して、vue2 コア ライブラリ コードを削除するかどうか、およびビルド環境で devtools をサポートするかどうかを webpack に指示できます。
plugins: [
new DefinePlugin({
BASE_URL: "'./'",
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false
})
]