nuxtを使ってqiitaの投稿一覧サイトを作る(準備)


2018/10/27 追記
store を使うよう更新しました。
詳細はこちらを参照してください。


前回の続きで今日から実装編

vue に慣れるためにも、qiita の投稿リストは一先ず置いておき
まずは静的な 2 カラムのページを作りたいと思います

インストール

ガイダンスに従いスターターテンプレートを用いて nuxt をインストールします
プロジェクト名は「helloNuxt」としました

1
2
3
4
$ vue init nuxt-community/starter-template helloNuxt
$ cd helloNuxt
$ yarn install
$ yarn run dev

http://localhost:3000/にアクセスするとページが表示されます
これだけで出来上がった気分になります ♪

スタイルの指定

Element を使用したいので設定を行います

1
$ yarn add element-ui

/plugins/element-ui.js を作成します

nuxt.config.js に以下の設定を行います

これで Element を使う準備ができました

レイアウトの作成

ヘッダーを追加しようと思います
まず、components/Header.vue を作成します

続いて layouts/twocolumns.vue を追加します

ここで怒られました・・・

1
2
3
4
5
This dependency was not found:

* ~components/Header.vue in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["C://vue//helloNuxt//node_modules//babel-preset-vue-app//dist//index.common.js"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./layouts/twocolumns.vue

To install it, you can run: npm install --save ~components/Header.vue

何でかなぁと思ったいてら「~/componentsを使ってね」とのこと
変更するとエラーが解消されました
https://github.com/nuxt/nuxt.js/issues/1183#issuecomment-318457804/

続いて pages/list.vue を追加します
layout に先ほど作成した twocolumns を指定します

ブラウザで確認してみると…

ヘッダーが追加されました

今日はここまで

ガイダンスを読んだ時よりも概要が掴めた気がします
peges に配置したファイルを自動でルーティングしてくれるのは便利ですね

次は axios を使ってもう少し動的なページにしたいと思います

それにしてもインデントについてまでエラーが出ると思わなかった@w@

1
2
3
4
5
6
C:\vue\helloNuxt\components\Header.vue
37:32errorExtra semicolon semi
39:1 errorExpected indentation of 2 spaces but found 0indent

? 2 problems (2 errors, 0 warnings)
2 errors, 0 warnings potentially fixable with the `--fix` option.

参考

Share