Nuxt.jsのインストールとHelloWorldと画面遷移まで
Nuxt.jsのインストールとHelloWorldと画面遷移までをメモ。
$ npm --version > 6.11.3 => 5.2以上ならnpxが標準でインストールされているのでOK
以下、仮にプロジェクト名(ディレクトリ名)を「MySample」とする。
$ npx create-nuxt-app MySample > いくつか質問される。プロジェクト名以外は空白でもOK。 $ cd ./MySample $ npm install $ npm run dev
http://localhost:3000でブラウザ確認できる。
次に、HelloWorldページをTOPページから画面遷移できるようにする。
$ mkdir -p ./pages/hello $ vi ./pages/hello/helloworld.vue <template> <h1>Hello {{ name }}!</h1> </template> <script> export default { data: () => { return { name: 'World: NuxtJS' } } } </script>
で、HelloWorldページ
http://localhost:3000/hello/helloworldがブラウザ表示できる。
次に、TOPページから画面遷移させるので、TOPページのコードを編集する。
$ vi ./pages/index.vue <div class="links"> <a href="/hello/helloworld" class="button--grey">Hello</a> </div>
で、TOPページ
http://localhost:3000から画面遷移できるようになる。