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

4333 ワード
AdminLTE nuxt.js TypeScript ESLint TypeScript テキストリンク

📗 説明

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

📦 インストール方法

$ 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

接続先情報

テストユーザー [email protected] / password
接続先 URL
DEMO画面 http://localhost:3000/

🔗 参考

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

🎨 ソースコード