Nuxt.js 触ってみた

vue

Nuxt.js は、フロントエンドとバックエンドをまとめて管理してくれるフレームワークっぽい。

twitter 関連の何かをやろうとすると、どうしてもバックエンドが必要になってくるので、勉強します。

npx create-nuxt-app <project-name>

これで、nuxtのプロジェクト作成

npm run dev

or

npx next

で実行サーバー立ち上げ可能 プロジェクトの画面を作るには、pagesにvueファイルを入れる

server framework を None にしておくと、Server ディレクトリは出ない。

vuetify で align を start にすると、上にずれる vuetify で justify を start にすると、左にずれる

今日は、バックエンドは、expressでやって、UIフレームワークは、vuetifyでやってみた。

server ディレクトリには、起動するときのルーターとかの設定が書かれている。ここに、自分で作成したルーターを仕込めば、色々できる。

// express は require しないとダメ
const express = require('express')
// express のルータを作成する
const router = express.Router()


// ハンドラの定義
router.get('/test', (req, res, next) => {
    const param = { test: 'success' }
    res.header('Content-Type', 'application/json; charset=utf-8')
    res.send(param)
})

// 外部に公開
module.exports = router

簡単なルーターの定義はこれ。

あとで、async function 内でapp.use(router)すると使えるようになる。 app.useの第一引数に、URLを指定すると、そのURLからのルーターのURLになる。