nuxtで始めるシングルページアプリケーション (その1: HelloWorld)
CLIのインストール
npm install -g vue-cli
プロジェクトの作成
vue init nuxt-community/starter-template hellonuxt
cd hellonuxt npm install
サーバーの起動
npm run dev
こんな画面が表示されればOK
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以下の変更を監視しているので、すぐに見た目に反映される。