Vue.jsのインストール方法
「Vue.jsってここ数年でよく聞くけどなんだろ・・・一体、何ができるんだろ」と興味がありますので、
- Web制作現場でどう使えばいいのか
- jQueryなど他のライブラリやフレームワークの代わりになるのか
- ネイティブで書くより効率がいいのか
みたいなことを中心に少しずつ学習して理解を深めるため、Vue.js専用のページを作ることにしました。
今まで自分がやっていた実装方法に対して「それをやるならVue.jsを使うと効率がいいよ」となるものがあればそれでOKですし、今までの方法がいいならそれでOKですし。
どんな結果になっても、学習した内容は今後の制作活動に役立てることができそうです。
実験的にVue.js使ってます
私の会社のWebサイトでは、技術習得のため実験的にVue.jsを使っています。主にモーダルウィンドウの実装に使った程度ですが・・・（この程度の難易度ならjQueryでも書けますし、ネイティブでも書けますよね。少し要件を変えればCSSだけでもできそうです）
というわけで前置きが長くなりましたが、まずはVue.jsを利用（インストール）してみます。
ファイルを読み込んでみよう
Vue.jsをインストール方法はいくつかありますが、このページでは手っ取り早くVue.jsを触る手段として「CDNサービスから配信されているファイルを読み込む」方法について書いてあります。
CDNサービスから配信されているファイルを読み込む
Vue.jsはCDNサービスのjsDelivr、cdnjs、unpkgからファイルが配信されています。以下のように、script要素を使って読み込んでみます。
<script src="https://unpkg.com/vue"></script>
unpkgから配信されているVue.jsは最新の開発バージョンを読み込むことができます。（本ページ公開時のバージョンは2.3.3です）
CDNサービスによって最新版の配信のタイミングが変わるようで、unpkgはnpmに公開されるとすぐに反映されるそうです。
これからVue.jsについて学習をする立場の方は、まずはunpkgを読み込めばいいと思います。
開発バージョンを使用しているかどうかの確認
unpkgから配信されているファイルを読み込んだら、Google Chromeのデベロッパーツールを使用してコンソールを見ます。
以下のメッセージが表示されていれば、開発バージョンを使用していることになります。
開発バージョンを使用している場合
Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html
テスト環境では開発バージョンを使用して、コンソールに表示されたメッセージを確認しながらデバッグを行うと効率よく作業ができると思います。
というわけで、まずはVue.jsのインストール方法について書きました。
インストール方法が理解できたら、次はサンプルコードを使ってテキストを表示します。以下のページをご参考ください。
このページを共有する