底辺プログラマーBlog
日常で学んだことなどを記事にしていきます。
vue.js

vue-cliを使わずに.vueファイルを読み込む

皆さんこんにちは!底辺プログラマーのヤスです!

前回のvue.jsを最小構成で動かす!に引き続きvue.jsの記事を作成していこうと思います。

今回はvue-cliを使わずに.vueファイルを読み込むところまでやっていきます。

Contents

.vueを読込むために必要なパッケージを追加

.vueファイルを読込むためにvue-loaderをインストールします。
このパッケージを導入する際、依存関係のあるvue-template-compilerも一緒にインストールしていきましょう。

package.jsonに『vue-loader』と『vue-template-compiler』が追記されていることを確認してください。

webpack.config.jsを編集

下記のように編集を行って下さい。

なぜかvue-loaderをビルドすると『vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.』というエラーが表示されてしまったのでVueLoaderPluginを追加しています。

バージョンのせいでしょうか?
仕事用のPCではこのエラーは出ませんでした。

index.jsでApp.vueを読込む

前回index.jsにて直接『Hello World!』と表示していましたが、
App.vueを読込むように編集を行います。

これでApp.vueファイルを読込むところまで作成できました。
まだApp.vueを作成していないので次で作成します。

App.vueを作成

App.vueが表示されることが目的なので中身は簡単に作ります。

msgをタグ内にバインドしておきます。
もっと簡単に書くならバインドせずに直接書いても大丈夫です。

ひとまず作成するファイルは以上となります。

ビルド

さっそくビルドしましょう。

dist/bundle.jsが更新されていることを確認してください。
エラーが出ている場合はエラー内容を確認して対処しましょう。
筆者の環境ではビルドは問題なく成功しています。。。

index.htmlをブラウザで表示する

前回同様にブラウザでindex.htmlを表示してください。

App.vueの内容が表示されていれば成功です。

筆者の環境では『Welcome to Your Vue.js App』が表示されています!

まとめ

今回はvue-cliを使わずに.vueを読込んで表示するところまで記事にしました。

とりあえず.vueファイルの読み込みが確認できれば後は好みで.vueファイルを作成していけば問題ないと思います。

次回はvue.jsにmxgraphを乗せるところまでできたらいいなと思っています。

最後まで読んで頂きありがとうございます。

%d人のブロガーが「いいね」をつけました。