【Vue.js】Vue CLIのまとめ【関連チュートリアル含む】

はじめに
Vue CLI
アプリ構成
- アプリ全体の構成
- srcフォルダ
コンポーネントの基本
- コンポーネントの読み込み
アプリ制作で躓いたところ
Vue CLIを用いたチュートリアル
- やさしめ Vue.js チュートリアル(1) ~ Vue CLI でプロジェクト作成と Linter の設定
- vue-cliで始めるVue.jsチュートリアル (1)
参考サイト

はじめに

Vue.jsでのポートフォリオ制作を目指して勉強したことをまとめていきます。

✅関連記事

【Vue.js】猫本を参考に基本的なところをまとめてみた。

【Vue.js】Vue CLIのデプロイとコンポーネントについて。

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 でも起動するようになった。