Vue-CLIとは？

Vue-CLIとは、コマンドラインを使ってVue.jsでアプリ開発を支援してくれるツールのことです。

Vue CLI 公式サイトでも紹介されているので、一通り目を通しておくことをオススメします。
https://cli.vuejs.org/

Vue CLIのダウンロード方法については、以前記事を書きました。
ダウンロード後、下記画面が表示されていれば、正常に動作していることが確認できます。

Vue.jsのフォルダ構成を理解する

では、早速中身を確認していきたいと思います。

プロジェクトを生成した直後は、node_modules、public、srcの3つのディレクトリが生成されており、各フォルダが密接につながっています。

node_mudulesはnpmでインストールされるパッケージの保管ディレクトリです。

src内にはasserts、routers、veiwsのディレクトリに分かれており
App.vue、main.jsが格納されてます。この中で、最も重要なフォルダがsrcになります。

├──public
│   ├── index.html 
│   ├── favicon.ico
│
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── routers
    │   └── index.js
    └── views
        ├── About.vue
        └── Home.vue

public/index.html

まず始めに、publicの中にあるindex.htmlを見てみましょう。

このファイルがブラウザが表示するファイルです。
ブラウザで表示されている内容が、そのままindex.htmlに記述されているわけではなく、

でid属性にappを指定して、Vueインスタンスを別のファイルで生成しています。

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>vue-application</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-application 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

main.jsの中身を見てみましょう。
main.jsはその名前が示す通り、プロジェクトフォルダの中で最も重要なJavaScriptファイルです。

まず、routerフォルダ内のindex.jsとApp.vueで記述されている内容をインポートしています。
さらに、render: h =>h(app)のrender関数を使ってApp.vueの中身をindex.html内の

に追加しています。

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

src/App.vue

main.jsでimportされているApp.vueは、template,script,styleの3つで構成されています(単一コンポーネント)。
templateタグではブラウザ上に表示したい内容をHTMLで記述することが可能です。
App.vueではさらに、HelloWorld.vueをscript内でインポートして、をtemplate内で記述し、その中身を表示しています。

src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/router/index.js

router内のindex.jsに記述されている内容は、Vue-routerでブラウザ上で表示するページのパスを示しており
それを選択すると指定されたコンテンツを表示してくれます。
ダウンロードした当初はhomeページとaboutページのパスがあらかじめ設定されています。

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
//import コンポーネント名 from 'Vueのファイルパス'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',       //path:'宛先のパス' 
    name: 'home',    //name: コンポーネント名
    component: Home  //component コンポーネント名
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

App.vue

パスを指定後、App.vueにパスを記述すると、指定したコンテンツを表示(画面移行)させることができます。
はaタグとしてレンダリングすることができます。

App.vue

<template>  
  <div id="app">
    
    <!-- 追加ここから -->
    <div class="header">
      <router-link to="/">
        home
      </router-link>
      <router-link to="about">
        about
      </router-link>
    <div>
    <!-- 追加ここまで -->

    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>

##store/index.js

store/index.jsはVueアプリケーションの状態を一括管理するための場所になります。
状態を一括で管理することで、どういった種類の状態の変化が起こるのかが分かりやすくなります。

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

今日はここまでです。学習が進んだら、追記訂正をしていきたいと思います。最後まで読んでいただきありがとうございました。