1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

nuxtで始めるシングルページアプリケーション (その1: HelloWorld)

CLIのインストール

npm install -g vue-cli

プロジェクトの作成

vue init nuxt-community/starter-template hellonuxt
cd hellonuxt
 npm install

サーバーの起動

npm run dev

こんな画面が表示されればOK f:id:masaru_furuya:20180123173947p:plain

Hello Worldを表示してみる

  • pages以下にページを書いていくので pages/index.vue を開いてHello Worldにテキストを変更してみる
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        Hello World!
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
    </div>
  </section>

pages以下の変更を監視しているので、すぐに見た目に反映される。