hello foo bar Saba note | Nuxt.js

Nuxt.js

2018.8.22 (水)

準備

公式ページのインストール方法はこちら
nodeが必要です。インストールして使えるようにしておいてください。

$ node -v
v9.2.0

当然npmも必要です。

$ npm -v
6.4.1

vue-cliをインストール(してない人だけ)

$ npm i -g @vue/cli
+ @vue/cli@3.0.3

@vue/cliを初期化(してない人だけ)

$ npm i -g @vue/cli-init
+ @vue/cli-init@3.0.2

vueのバージョン確認(してない人だけ)

$ vue -V
3.0.0-rc.10

開発ツールの準備。いわゆるAdd-on
Vue.js Devtoolsの導入方法と機能まとめ

プロジェクトの作成

$ vue init nuxt/starter nuxtapp

? Project name nuxtapp
? Project description Nuxt.js project
? Author osamthing

   vue-cli · Generated "nuxt".

   To get started:

     cd nuxtapp
     npm install # Or yarn
     npm run dev

nuxtappというディレクトリが作成されてすでにプロジェクトファイルの雛形ができています。To get started:のコマンドに従ってすすめます。
プロジェクトディレクトリに移動して。

cd nuxtapp

npm installして(私の場合)

npm install # Or yarn

npm run devでlocalhost:3000で起動します。

npm run dev

ブラウザーでhttp://localhost:3000にアクセスするとnuxt.jsのスタート画面がたちがっています。


プロジェクトのセットアップ

初期状態では以下のような構成になっています。

.editorconfig
.eslintrc.js
.gitignore
.nuxt/
assets/  * いわゆるアセット
components/  *.vueのコンポーネント管理DIR
layouts/
middleware/
node_modules/
nuxt.config.js
package.json
package-lock.json
pages/ *コンポーネントの配置DIR
plugins/
README.md
static/ *公開用の静的リソースのDIR
store/ *vuexのストア(オートローディングの対象)DIR

ルーティング

といっても/pages内のディレクトリ構成をそのままパスとしてURL-Resolveするってだけの話です。わかりやすいといえばわかりやすい。

├── pages
    ├── index.vue
    ├── _id.vue
    └── test
        ├── index.vue
        └── about.vue

これはルーティングなのか?PROJECT/pagesがDocumentRootになっているだけなのでは?まあ、いいか。と思ったけど_idはルーティングか。

URI path
/ pages/index.vue
/* pages/test/_id.vue
/text pages/test/index.vue
/test/about pages/test/about.vue

_idというのだけちょっと特殊で、パスはidとしていろんな文字列を受け付けます。
なので、/hogeで_id.vueにアクセスできます。アンダースコアで_id,_name,_slugとかでもOK。当然これはリクエストとして取り込むことができる変数になります。

asyncData axios-module

nuxt-community/axios-module