Update!!今年に入ったくらいからVue.jsは3系を使うようになることが増えてきて、色々と調べることも多く備忘録として残しておきたいと思います。TypeScriptと使う環境構築をやってみます。最近ではViteなどwebpackに変わるバンドルツールも増えてきているようですが、慣れているのと忙しいのを言い訳になかなか本格的な導入まで出来ていないのが課題です、、といってもwebpackを使ったプロジェクトも現状は多いので良い機会になりました。過去記事「webpack&TypeScriptのプロジェクトでVue.jsを使える開発環境を構築してみる」ではVue.jsの2系とTypeScriptを使う環境構築についてまとめています、また、今回の開発環境のベースには、下記の参考記事にある内容ですでに環境が整っている前提で進めています。TypeScriptやESlintの設定などは過去記事「webpackでESLintが使える環境を構築してみる」をご覧ください。API」というのを使うのがスタンダードとなります。APIで型付けを行なっていきます。webpackでTypeScriptが使える環境に加えて、Vue.jsの3系でTypeScriptが扱えるようにモジュールなどをインストールしていきます。...........}Vue.jsの3系では「vue-property-decorator」が対応していないようなので、バージョン2系で使っていた場合には削除しておきます。vue-property-decorator続けてESlintを導入する場合には各種設定ファイルを用意していきます。この辺りは2系と3系で特に変わりはないかと思います。必要に応じて設定していきます。}}Vue.jsの2系同様に.vueファイルに対応した型定義用のファイルを用意しておきます。これでコンパイル時のエラーに対応します。component}最後にwebpack用の設定ファイルを用意します。2系の時と同じものを使うとエラーが出ることから、3系とは少し差異があるようですね。buildDefault;2系と3系ではソースコードのファイル名などが変わっているようで、Vue.jsのモジュールのエイリアス指定で、2系と同じものを指定すると参照エラーが出る場合があります。2系同様にソースコードファイルは用途によっていくつか異なるものが用意されており必要に応じて使い分けます。modulesとしてimportを使うときに選択するvue.esm-bundler.jswebpackなどでバンドルする時に選択するvue.cjs.jsNode.js側で使用(require()を使うなど)する時に選択するvue.runtime.****.js.vueファイルなどのVue.jsで扱われるテンプレートをコンパイルしない場合に選択するランタイム専用ビルドで、vue.cjs.js以外のものにそれぞれ用意されている最後にエントリーポイント用のファイルでVueのコンポーネントを呼び出して実行してみます。3系ではDOMにマウントさせる方法が少し異なります。APIを試してみる」でもまとめていますのでご参考に。下記ではid属性がappの値にマウントされるようになっています。APIで型付けを行ないます。defineComponent()というメソッドを使って処理を作っていきます。APIよりコードも見やすくすっきりとしている印象ですね。});</script>今回は、Vue.jsの3系でTypeScriptを使うときのwebpackでの環境構築についてまとめてみました。IEのサポートも切れるということで、今後はVue.jsの3系への移行が増えてくるのではないでしょうか。APIはTypeScriptとの相性も良いようで、Vue.jsでTypeScriptを使う場合には合わせて3系への移行や導入も検討したいですね。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。