Vueでコンポーネントを作ってみた件
さて前回まででヘッダーの作成が完了しました。次はコンテンツ部分です。まずはTodo.vue、Task.vueの二つに共通するソート機能のボタン部分と、リストのタイトル部分をを作っていきます。 共通パーツをコンポーネント化する Todo.vue、Task.vue共通のソート機能をヘッダー下部に作っていきます。App.vueに直接書き込んでも良いのですが、この先違う画面の開発でソート機能のない画面を作 […]
さて前回まででヘッダーの作成が完了しました。次はコンテンツ部分です。まずはTodo.vue、Task.vueの二つに共通するソート機能のボタン部分と、リストのタイトル部分をを作っていきます。 共通パーツをコンポーネント化する Todo.vue、Task.vue共通のソート機能をヘッダー下部に作っていきます。App.vueに直接書き込んでも良いのですが、この先違う画面の開発でソート機能のない画面を作 […]
今回はコンポーネントの親である、App.vueファイルでヘッダーとフッターのカスタマイズをしてみたいと思います。 ヘッダーの修正 ヘッダー部のリンクの変更とCSSを調整したいと思います。変更するファイルはrouter.jsとApp.vue。また、新規タスク登録用ページTask.vueの新規作成です。 まずはTask.vueを作成してしまいましょう。 Task.vueの作成 Task.vueに関して […]
前回はインストールしたファイルをどのように描画しているか順をおって説明しました。今回はTODOリストをつくって行けるようにいじってみたいと思います。 Todo.vueファイルを作る まずはTodo.vueファイルを作りルーターに渡していきたいと思います。まずは新規ファイルを作成し、そこに最低限の記述だけ先にしていきます。 // Todo.vue<template> <div class […]
Vue-Cliを使いプロジェクトのパッケージがインストール完了すると。様々なファイルがインストールされたことがわかるかと思います。全てを解説すると長くなってしまうのでまずは、主要なファイルの説明を簡単にしていきたいと思います。 どうやって表示されているか まずはVue.Jsがどのようにブラウザに表示させているかを把握しましょう。– public / index.htmlこのファイルが最 […]
さて、前回お話しした通りVue-Cliを使いTODOリストを作っていきます。Vue-Cliのインストール方法がわからないという方はこちらから。 プロジェクトの作成 createコマンドを使いプロジェクトを作成します。プロジェクト名は「app_todo」です。 vue create app_todo すると次のような質問がでてきます。 Vue CLI v3.0.1 ? Please pick a p […]
さて、Vue-Cliを勉強すると言ってもリファレンスをみながら進めていくだけでは退屈なので、制作物を決めていきたいと思います。 Webアプリケーションを作りたい フレームワークを使った制作物といえばやはりWebアプリではないでしょうか。Vue.Jsを使うことで再利用性やディレクティブ、データバインディングといった機能を活かしたスマートな制作ができます。 今回はTODOリストを作成しようと思います。 […]
人気のjavascriptフレームワークVue.jsをはじめてみました。なぜVueなのかというと単純に他のフレームワークに比べ学習コストが低いからです。とはいえ使いこなすためにはそれなりの時間がかかるためここから地道に努力していこうと思います。 Vue.Jsとは さて、Vue.jsの特徴はと言いますと。 学習コストの低さ コンポーネントによる再利用性 ディレクティブを使える このあたりになってくる […]
今回はヘッダーとフッターにメニューを追加していきたいと思います。メニューの項目は投稿のカテゴリーから選択し、ユーザーが興味のある投稿に辿りつきやすくしていきます。 投稿カテゴリを増やそう 最初にメニューのカテゴリを追加していきます。ダッシュボード左の「投稿」カテゴリから「カテゴリー」を選択します。 次に「新規カテゴリーの追加」からカテゴリーを追加していきます。赤枠内の「名前」、「スラッグ」を入力し […]
前回WordPressのテーマを Lion Blogに決定しました。今回はLion Blogのカスタマイズを進めていきます。 基本設定のカスタマイズ まずは基本設定のカスタマイズです。ダッシュボード左の「外観」からカスタマイズを選びます。 次に「基本設定」の項目をクリックします。 基本設定で変更するのは 記事ビューレイアウト設定 コピーライトの変更 メイン画像の設定 の3点を変更していこうと思いま […]
WordPressのインストールが完了したのでテーマを変更してみたいと思います。テーマは有料、無料とあるのですが今回は初めてのWordPressということで無料のテーマから選んでいくことにしました。 テーマを選ぼう 今回の選考基準は大きく分けると以下の3点です。 デザイン性 AMP対応 適切なSEO対応 デザイン性 テーマのカスタムに関しては、後々自分で改造していくのでまたの楽しみに置いておくとし […]