はじめに
コジマです。
nuxt使うとvueの開発が楽になるとのことで
npxコマンドを使ってnuxt.jsのプロジェクトを作成してみます。
環境はWindowsで、コマンドラインはPowerShellで実行しています。
基本これに従ってます。公式バンザイ。
https://ja.nuxtjs.org/guide/installation/
バージョンの確認
以下のコマンドを実行して、npm,npxのバージョンを確認します。
> npm --version 6.9.0 > npx --version 6.9.0
プロジェクトの作成
npx create-nuxt-app プロジェクト名コマンドでプロジェクトを作成します。
今回はhello-worldとしました。
> npx create-nuxt-app hello-world
https://ja.nuxtjs.org/docs/2.x/get-started/installation
yarnやnpmも使用可能です。詳しくは上記リンクを見てみてください。
実行結果は以下。
諸々質問されるので、お好みで選択します。
バージョンによって質問が変わるっぽいです。
自分は以下のようにしました。
npx: installed 341 in 47.561s create-nuxt-app v2.10.1 ✨ Generating Nuxt.js project in hello-world ? Project name (hello-world)
＝＞デフォルト(hello-world)
? Project description (My neat Nuxt.js project)
＝＞デフォルト(My neat Nuxt.js project)
? Author name ()
＝＞kojimaとした
? Choose the package manager (Use arrow keys) > Yarn Npm
＝＞Npmとした
? Choose UI framework (Use arrow keys) > None Ant Design Vue Bootstrap Vue Buefy Bulma Element Framevuerk iView Tachyons Tailwind CSS Vuetify.js
＝＞Bootstrap Vueとした
? Choose custom server framework (Use arrow keys) > None (Recommended) AdonisJs Express Fastify Feathers hapi Koa Micro
＝＞None (Recommended)とした
? Choose Nuxt.js modules (Press to select, to toggle all, to invert selection) >( ) Axios ( ) Progressive Web App (PWA) Support
＝＞Axiosとした
? Choose linting tools (Press to select, to toggle all, to invert selection) >( ) ESLint ( ) Prettier ( ) Lint staged files
＝＞ESLintとした
? Choose test framework (Use arrow keys) > None Jest AVA
＝＞None
? Choose rendering mode (Use arrow keys) > Universal (SSR) Single Page App
＝＞Universal (SSR)とした
? Choose development tools (Press to select, to toggle all, to invert selection) >( ) jsconfig.json (Recommended for VS Code)
＝＞jsconfig.json (Recommended for VS Code)とした
以上でインストールが始まります。
🎉 Successfully created project hello-world
To get started:
cd hello-world
npm run dev
To build & start for production:
cd hello-world
npm run build
npm run start
作成されたファイルの確認
できあがったものを確認します。
> cd .\hello-world\ > ls
実行結果
ディレクトリ: XXXXX\hello-world Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 2019/09/09 14:09 assets d----- 2019/09/09 14:09 components d----- 2019/09/09 14:09 layouts d----- 2019/09/09 14:09 middleware d----- 2019/09/09 14:09 node_modules d----- 2019/09/09 14:09 pages d----- 2019/09/09 14:09 plugins d----- 2019/09/09 14:09 static d----- 2019/09/09 14:09 store -a---- 2019/09/09 14:09 207 .editorconfig -a---- 2019/09/09 14:09 244 .eslintrc.js -a---- 2019/09/09 14:09 1268 .gitignore -a---- 2019/09/09 14:09 209 jsconfig.json -a---- 2019/09/09 14:09 1208 nuxt.config.js -a---- 2019/09/09 14:09 418943 package-lock.json -a---- 2019/09/09 14:09 662 package.json -a---- 2019/09/09 14:09 381 README.md
いろいろできています。
プロジェクト作成時の選択肢によってここは変化がありそうです。
サーバー起動
以下のコマンドを実行
> npm run dev
実行結果
> hello-world@1.0.0 dev XXXX\hello-world > nuxt ╭─────────────────────────────────────────────╮ │ │ │ Nuxt.js v2.9.2 │ │ Running in development mode (universal) │ │ │ │ Listening on: http://localhost:3000/ │ │ │ ╰─────────────────────────────────────────────╯ i Preparing project for development 14:10:42 i Initial build may take a while 14:10:42 √ Builder initialized 14:10:42 √ Nuxt files generated 14:10:42 * Client █████████████████████████ building (32%) 185/198 modules 13 active vue-loader » eslint-loader » components\Logo.vue * Server █████████████████████████ building (17%) 63/64 modules 1 active vue-loader » components\Logo.vue
最後にhttp://localhost:3000で接続して、TOP画面が表示されれば完了です。
さいごに
nuxtってルーティング設定いらないのやばやばですね。
nodeとvueとnuxtの関係性も見えてきたところです。
まだまだ駆け出しですが、頑張っていきますよー
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！
以上、コジマでした。
