vue Nuxt.js環境構築

本稿について

本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます


プロジェクトの作成
$ npx create-nuxt-app project-name
※ yarnでも可能

プロジェクト名の設定
? Project name: project-name

※ デフォルトだと npx create-nuxt-app で指定したプロジェクト名になる

言語の選択
? Programming language: (Use arrow keys)
❯ JavaScript
  TypeScript

パッケージ管理の選択
? Package manager: (Use arrow keys)
❯ Yarn
  Npm

UIフレームワークの選択
? Project name: focusup-web
? Programming language: JavaScript
? Package manager: Npm
? UI framework:
  None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Chakra UI
  Element
❯ Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js

追加するモジュールの選択
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
◯ Progressive Web App (PWA)
◯ Content

コード規約管理ツールの追加
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint

テストフレームワークの選択
? Testing framework:
  None
❯ Jest
  AVA
  WebdriverIO

レンダリングのモードの選択
? Rendering mode:
❯ Universal (SSR / SSG)
  Single Page App

サーバー(node) で動かすか, SPAで動かすか
? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
  Static (Static/JAMStack hosting)

jamstackについてはこちらを参照

開発ツールを追加する (option)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
◯ Semantic Pull Requests
◯ Dependabot (For auto-updating dependencies, GitHub only)

※ jsconfigについてはこちら

※ Semantic Pull Requestsについてはこちら

※ Dependabotについてはこちら

CIツール
? Continuous integration: (Use arrow keys)
❯ None
  GitHub Actions (GitHub only)

githubを選択すると usernameを指定する
? What is your GitHub username? hogehoge

リポジトリ管理ツール(Gitのみ)
? Version control system: (Use arrow keys)
❯ Git
  None


これだけでプロジェクトできた
?  Successfully created project project-name

  To get started:

cd project-name
npm run dev

  To build & start for production:

cd project-name
npm run build
npm run start

  To test:

cd focusup-web
npm run test

[参考]

Back