目次
はじめに
Vue.jsでのポートフォリオ制作を目指して勉強したことをまとめていきます。
✅関連記事
Vue CLI
Vue.jsアプリの作成 バージョン3以降(GUIなどが追加)
vue create [プロジェクト名]
猫本はバージョン2を使った解説でwebpackテンプレート(※変更可能)を用いたコマンド
vue init webpack [プロジェクト名]
サーバー起動
npm run serve
アプリ構成
アプリ全体の構成
バージョンやインストール時の質問の答え方でフォルダの作られ方が異ってくるので注意。

publicにあるindex.html
がアプリのビューの大元になる。SPAのインデックスになる。
srcフォルダ
基本的に編集するのはsrcフォルダ
の中だけ。
※Vuexを使う際はここにstoreフォルダを作る。

assets
画像やフォントなど静的なファイルを保管。
components
単一ファイルコンポーネントを入れておく場所。
Views
各ページ用のファイルを保管する場所。ページ用のVueファイル側でコンポーネント用のVueファイルをインポートして使う。
router
ルーティングの設定をindex.vueで行う。
バージョン2ではsrcディレクトリ直下のrouter.jsで設定を行う。
App.vue
各ページのベース。ヘッダーやフッターなど、全ページに共通して表示させたいコンポーネントをこのファイルでインポート。
<router-view />
の部分で、viewsフォルダ内の各ページ用のファイルを受け取って表示させる役割を担っている。
main.js
全ページに反映させたいJavaScriptコードを書く。
また、public/index.htmlに記載のid="app"
とmain.jsの$mount(‘#app’)が連動している。
index.html
(初期ひな形)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
(初期ひな型)
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
ルートインスタンスはもろもろimportされた後に作成されていることがわかる。
コンポーネントの基本
コンポーネントの読み込み
export default
と宣言することで、コンポーネントを他のコンポーネントからimport
して使用できるようになる。
componentsディレクトリにFooter.vueを作成。
<template> <footer> sample site </footer> </template> <script> export default { } </script>
App.vueで読み込み。赤字部分が追記。
①importで呼び出すときのコンポーネントの名前を定義。(パスは呼び出し側からコンポーネントへの相対パス)
②componentsプロパティへ名前を登録。
③テンプレートでコンポーネントを呼び出し。(importで定義した名前を記載)
<template> <div id="app"> <nav> <router-link to="/home">Home</router-link> <router-link to="/Contact">お問い合わせ</router-link> </nav> <router-view /> <Footer /> </div> </template> <script> import Footer from './components/Footer' export default { name: 'App', components: { Footer } } </script>

こんな形で表示できた。
ちなみに以下の形で記載すると急にエラーになるのはなぜだろう。。。テンプレートにはまだ知らないルールがあるっぽい。。。
<template> <footer> sample site </footer> test </template>
アプリ制作で躓いたところ
コンポーネントのオプションで注意すること。
①コンポーネントはルートインスタンスnew Vue()
が作成される前に定義しておく必要がある。
そのため、main.jsで記載のルートインスタンスnew Vue()はコンポーネントをimportした後に記載されている。
②データはオブジェクトを返す関数にする必要がある。
ルートコンストラクタのオプション(基本main.jsに記載)
単一データ
data: { message: "Hello!!" }
複数データ(一例)
data: { todos: [], current: -1, options: [ { value: -1, label: 'すべて'}, { value: 0, label: '着手'}, { value: 1, label: '完了'}, { value: 2, label: '保留'} ] },
コンポーネントのオプション
単一データ
export default { name: "app", data() { return{ message: "Hello!" } } };
アロー関数を用いた場合
data: () => ({
message: "Spark joy!"
})
複数データ
export default { name: "app", data: function() { return{ todos: [ { id: 1, text: "ときめき" } ], message: "Spark joy!" } } };
アロー関数を用いた場合
data:() => ({ todos: [ { id: 1, text: "ときめき" } ], message: "Spark joy!" })
複数のコンポーネントインスタンス間で同じオブジェクトを参照することを回避するため上記のような記載になる。
外部CSSの適用
①App.vueでの読み込み
普通の外部CSSをコンポーネント全体に反映させたい場合は、ルートコンポーネントのApp.vueのStyleタグで読み込む。
<style> @import "./css/style.css"; </style>
反映された。ホームディレクトリのindex.htmlファイルに<head>タグの記載あるのにこちらでは反映されなかったのが驚き。

②main.jsでの読み込み
main.jsでimportで読み込まれる。
import './css/style.css'
画像の読み込み
Home.vueのテンプレート内から読み込みたい際。imgタグでsrcの頭に@を付ける。
v-on省略かと思いきや、v-on:/~~と記載すると表示されなかった。調べたところwebpack(複数のモジュールを1つにまとめたファイルを出力するツールのこと)のfile-loaderで画像をモジュールで読み込んでいるとのこと。
<img src="@/image/profile2.png" width=350px>
サーバーが起動しなくなった
いつも通りにコマンドを打つと以下のようなエラーが出るようになった。。。
$ npm run serve npm ERR! missing script: serve npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\chonm\AppData\Roaming\npm-cache\_logs\2020-03-31T11_44_38_781Z-debug.log
原因はわからないが、package.jasonに以下を追記したら起動するようになった。
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", + "serve": "npm run dev", + "tehepero": "npm run dev", "build": "node build/build.js" },
ちなみにすごくふざけてしまったが $ npm run tehepero でも起動するようになった。
Vue CLIを用いたチュートリアル
やさしめ Vue.js チュートリアル(1) ~ Vue CLI でプロジェクト作成と Linter の設定
Vue CLI バージョン3
vue-cliで始めるVue.jsチュートリアル (1)
Vue CLI バージョン2
参考サイト
Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)
【Vue CLI】普通の外部CSSをcomponent全体に反映させたい
【Vue.js】imgタグのsrc要素は指定の仕方によって読み込み方が違う
コメントを残す