webpack&TypeScriptのプロジェクトでVue.jsを使える開発環境を構築してみる
最終更新日: Update!!
過去記事などで、webpackとTypeScriptを使った開発環境の構築方法についていくつかまとめていますが、今回はwebpackとTypeScriptのプロジェクト内でVue.jsのライブラリを使えるようにしていきたいと思います。Vue.jsはJavaScriptのフレームワークで、SPAなどのウェブアプリケーションを開発する際によく使われています。Vue.jsを使うことで動的なウェブページが簡単に作成することができます。
今回はVue.jsのライブラリのソースコードをnpmでインストールしていきます。まずは、下記コマンドでVue.js本体のパッケージを追加します。
今回はwebpackとTypeScriptをのプロジェクト内でVue.jsを使えるように環境構築する方法についてまとめてみました。Vue.jsはとても便利なフレームワークで、DOMを伴う複雑な処理も簡単に実装することができ、開発できる幅も広がりますね。 (参考にさせて頂いたサイト) 最新版TypeScript+webpack 4の環境構築まとめ インストール(さまざまなビルドについて)
$ npm install --save vue + vue@2.6.11また、関連するパッケージも下記のようにインストールしていきます。ここは必要に応じてパッケージを選択していきます。
$ npm install --save-dev vue-class-component vue-loader vue-template-compiler vue-property-decorator + vue-class-component@7.2.3 + vue-loader@15.9.2 + vue-template-compiler@2.6.11インストールが完了すると、package.jsonにパッケージが追記されているのが確認できますね。 【package.json】
{ "dependencies": { "vue": "^2.6.11", ........... }, "devDependencies": { "vue-class-component": "^7.2.3", "vue-loader": "^15.9.2", "vue-template-compiler": "^2.6.11", "vue-property-decorator": "^9.1.2" ........... }, "browser": { "vue": "vue/dist/vue.common.js" }, ........... }TypeScriptを使わず、通常のJavaScriptでBrowserifyを利用する時には、上記のように「browser」の項目にVue.jsでビルドファイルを指定しておきます。でないと、下記のようにコンソール上でエラーが表示されてしまいます。
Vue warn: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.エラーの内容としては、ランタイム限定のファイルが読み込まれてしまっているようで、デフォルトの設定とのことです。ですので上記のようにpackage.jsonに指定する必要があります。 次にTypeScriptの設定を行います。下記のように設定していきますが、重要となるのは「allowSyntheticDefaultImports」「lib」「experimentalDecorators」の指定となります。 【tsconfig.json】
{ "include": [ "src/ts/**/*" ], "exclude": [ "node_modules" ], "compilerOptions": { "incremental": true, "target": "ES5", "module": "es2015", "sourceMap": true, "removeComments": true, "strict": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "lib": [ "dom", "es2020" ], "experimentalDecorators": true } }続けて、webpackの設定を行っていきます。ここでは、「.vue」ファイルが読み込まれるように「vue-loader」の指定と、エイリアスの設定としてVue.jsのビルドファイルの指定を忘れないようにしておきます。またvue-loaderのプラグイン設定も追加しておきます。 【webpack.config.js】
const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { mode: 'development', entry: './src/ts/index.ts', output: { path: `${__dirname}/dist/assets/js`, filename: 'main.min.js' }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader' }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] }, ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: [ '.ts', '.js', '.vue' ] }, plugins: [ new VueLoaderPlugin() ] }ここまで出来たらVue.jsを使う準備が完了です。TypeScript上でVue.jsの処理を書いていきます。最初にimport文でVue.jsのモジュールを読み込んでおきます。今回は.vueファイルを読み込んでみます。ここではHTML要素にマウントだけしておきます。 【index.ts】
'use strict'; import Vue from 'vue'; import App from './vue/app.vue'; new Vue(App).$mount('#app');続いて、単一コンポーネントファイルに処理を書いていきます。.vueファイルでTypeScriptを使う場合には、scriptタグに「lang="ts"」と追記することでTypeScriptが使えます。Vue.jsでTypeScriptを使う際にはいろんな記法がありますが、ここではClass APIを使った方法で記述しています。ですので、「vue-property-decorator」というモジュールを読み込んでいきます。通常のJavaScriptでのVue.jsの書き方とは少し異なるのですが、その点についてはまた改めて別記事でまとめてみたいと思います。 【/vue/app.vue】
<script lang="ts"> import { Component, Prop, Emit, Watch, Vue } from 'vue-property-decorator'; @Component({ components: {} }) export default class App extends Vue { message: string = 'Hello World!!'; mounted(): void { this.showMessage(); } showMessage(): void { console.log(this.message); } } </script>上記コードで実際にVue.jsが動作しているか確認してみると、指定したメッセージが問題なく表示されました。 【console.log】
Hello World!!また、場合によってはTypeScript上でインポートして、Vue.jsが使えているにも関わらず、モジュールが見つからないというエラーが表示されることがあります。
Cannot find module 'vue'.その場合には、プロジェクトのルートディレクトリ直下に「types.d.ts」という下記のようなファイルを作成しておくことで対応できます。これでエラーが表示されなくなりました。 【types.d.ts】
declare module 'vue'; declare module '*.vue' { import Vue from 'vue'; export default Vue; }
今回はwebpackとTypeScriptをのプロジェクト内でVue.jsを使えるように環境構築する方法についてまとめてみました。Vue.jsはとても便利なフレームワークで、DOMを伴う複雑な処理も簡単に実装することができ、開発できる幅も広がりますね。 (参考にさせて頂いたサイト) 最新版TypeScript+webpack 4の環境構築まとめ インストール(さまざまなビルドについて)
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories