はじめに
Nuxt使えばすっごく簡単にWebページ作れたよって話です。
Nuxt.js インストール のページに書いてあることをやってみたという記事です。
詳しい設定ファイルの内容や具体的なコードについては今回書いていません。
Nuxt.jsとは
公式サイト より
Nuxt.js は Vue アプリケーションを作成するフレームワークです。
Vueの設定を予めプリセットしてくれていたり、ルーティングの定義をファイル作成でやってくれたり、Vue で動くページを作るのがとても簡単・楽になる。
Nuxt導入
では実際に導入していきます。
環境
Node.jsをインストールしておいてください。
バージョンは以下で行いました。
* Node v10.15.0
* npm 6.4.1
導入作業
プロジェクトを作成したいディレクトリに移動し、コマンドを実行。
PS D:\git> npx create-nuxt-app <プロジェクト名>
プロジェクト名や使いたいサーバーフレームワーク、UIフレームワーク、テストフレームワークなどなど聞かれるので矢印キーで選択してエンターを押していく。
npx: installed 407 in 6.499s
> Generating Nuxt.js project in D:\git\vue_study
? Project name vue_study
? Project description My phenomenal Nuxt.js project
? Use a custom server framework none
? Choose features to install
? Use a custom UI framework vuetify
? Use a custom test framework none
? Choose rendering mode Single Page App
? Author name
? Choose a package manager npm
最後まで選ぶとプロジェクトの生成が始まる。
Reinitialized existing Git repository in D:/git/vue_study/.git/
> nodemon@1.18.10 postinstall D:\git\vue_study\node_modules\nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
> nuxt@2.4.3 postinstall D:\git\vue_study\node_modules\nuxt
> opencollective || exit 0
:-:
.==-+:
.==. :+- .-=-
.==. :==++-+=.
:==. -**: :+=.
:+- :*+++. .++.
:+- -*= .++: .=+.
-+: =*- .+*: .=+:
-+: .=*- .=*- =+:
.==: .+*: -*- -+-
.=+:.....:+*-.........:=*=..=*-
.-=------=++============++====:
Thanks for installing nuxtjs
Please consider donating to our open collective
to help us maintain this package.
Number of contributors: 167
Number of backers: 160
Annual budget: US$ 45,815
Current balance: US$ 12,364
Donate: https://opencollective.com/nuxtjs/donate
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 996 packages from 596 contributors and audited 14057 packages in 32.898s
found 0 vulnerabilities
あとは見てれば終わります！
実行
npm コマンドを実行します。
npm install
npm run dev
これで必要なモジュールのインストールとタスクの実行が完了するので以下URLにアクセスすると。。。
http://localhost:3000/
こんな感じでページが表示されます。
とっても簡単ですね！
中身を少し見てみる
作成されたプロジェクトのファイルの中身を少し見てみましょう。
レイアウトに関する部分をピックアップします。
pages
この中にファイルを作成すると、勝手に vue-router の設定を生成してくれます。
pages
- index.vue
- inspire.vue
こういうファイルを作れば↓の2つのURLのページが生成されます。
http://localhost:3000/
http://localhost:3000/inspire
vue の場合に記載する以下を勝手にやってくれるということですね。
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'inspire',
path: '/inspire',
component: 'pages/inspire.vue'
}
]
}
layouts
この中に共通のレイアウトを定義します。
default.vue が共通レイアウトです。
この他にもエラー時のレイアウトを定義したりします。
components
vueコンポーネントはここに入れます。
感想・雑記
基本的なことは公式サイト に書いてあるのですが、実際どうなんだろうということでやってみました。
コマンドいくつかであっという間にできてとても簡単でした！
1からvueプロジェクト作る場合とも比べてルーター自動で定義してくれたり必要なモジュールインストールしてくれてたりと構築だけでなく実装面も楽ですね。