LoginSignup
1
6

More than 3 years have passed since last update.

【2020年】Nuxt.js & Typescript & ESList で作成するボイラープレートはこれでいいはず!

Posted at

📗 説明

Nuxtjs・Typescript を利用したボイラープレートです。

サンプル機能

  • 認証
  • 入力フォーム
  • チャート表示
  • 画像カルーセル
  • オーバーレイ

ディレクトリ構造

.
├── src (Nuxt関連のソースファイル)
│    ├── @types
│    ├── assets
│    ├── common
│    ├── components
│    ├── interfaces
│    ├── middleware
│    ├── pages
│    ├── plugins
│    ├── static
│    ├── store
│    ├── test
│    └── utilities
├── .babelrc (Babel設定ファイル)
├── .vscode (VSCode設定ファイル)
├── jest.config.js
├── nuxt.config.ts
├── package.json
├── tools (サーバー起動用モジュール)
└── tsconfig.json

🖊️ 利用している技術

  • Nuxtjs 2.12.2
  • Typescript
  • ESLint
  • Jest
  • VueChart
  • AdminLTE3

🌐 Demo

DEMO

📦 インストール方法

$ cd /path/to/nuxtjs-typescript-boilerplate
$ nodebrew install v13.13.0
$ node install -g yarn
$ yarn

💬 使い方

$ cd /path/to/nuxtjs-typescript-boilerplate
# サーバーサイドを起動する(認証機能で利用)
$ node ./tools/server.js
# クライアントサイドを起動する
$ yarn run dev

接続先情報

テストユーザー test@sample.com / password
接続先 URL
DEMO画面 http://localhost:3000/

🔗 参考

プロジェクト 概要
公式ドキュメント - Nuxt.js 公式ドキュメント - Nuxt.js
公式ドキュメント - TypeScript 公式ドキュメント - TypeScript
仕事ですぐに使えるTypeScript 仕事ですぐに使えるTypeScript
AdminLTE Docs AdminLTE Docs
Bootstrap4 日本語リファレンス Bootstrap4 日本語リファレンス
アイコン(fontawesome) アイコン(fontawesome)

🎨 ソースコード

1
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
6