Skip to content

Latest commit

 

History

History

setup

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

sidebar
auto

セットアップ

ハンズオンに行く前に環境をセットアップしましょう。

ハンズオン用の作業ディレクトリを作成する

自分の環境に、今回のハンズオン作業用に適当な場所にディレクトリを作成します。

以下は、ターミナルですが、お使いのPCでGUI上でも大丈夫です。

$ mkdir -p /path/to/vuejs-handson

ハンズオン用のテンプレートHTMLファイルを作成する

ハンズオンではいくつか演習があるので、テンプレートを作成します。

作成した作業ディレクトリ直下に、template.htmlというファイル名で、ハンズオンのひな形的なHTMLファイルを作成します。

$ cd /path/to/vuejs-handson
$ touch template.html

テンプレートHTMLファイルにscriptタグでVue.jsを読み込む

template.htmlを作成したら、ファイルの中身を以下のように編集します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Hands-on</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  </head>
  <body>
  </body>
</html>

このハンズオンでは、特にツールを使わずにscriptタグでVue.jsを読み込んだ素のHTMLファイル、使い慣れたエディタ、そしてブラウザ(Google Chrome)でのみで学習していきます。

Vue.js本体が正常に引き込めるかどうか、以下のopenコマンド、または、ブラウザを開いてブラウザにこのtemplate.htmlファイルをドラッグ&ドロップして確認してみましょう。

$ open ./template.html

ブラウザに何も表示されませんが、Vue.js本体がロードされているかどうか、Chrome Devtoolsで以下の内容を確認しましょう。

  • Vue.js本体が読み込まれているかどうか Vue.js本体がロードされているかどうか
  • コンソールにVue.jsのメッセージが出力されているかどうか コンソールにVue.jsのメッセージが出力されているかどうか

準備できました？

ここまで準備できたら、後はtemplate.htmlをハンズオンの演習ごとに、適切なファイル名でコピーして実習するだけです！