はじめに

最近vue.jsを触り始め、触っているとまぁ面白いので記事にしようかと思いました。
vue.jsはcssをvueのコンポーネント内にスコープできるのが大変いいですね。
BEMなんて要らない。ってなります！！！
今回は、超入門 ~vue-cliを使ったプロジェクト作成の手順~ です。
コーディングは、一切行わない予定ですので、ご了承ください。

環境

$ node -v 
v8.11.3
$ vue --version
3.2.1

上記のコマンドでnode.js(8.9以上)とvue-cliが入っているかを確認してください。
入っていない場合は、各自インストールをお願いします。
下記のコマンドインストールできるかと思います。

brew install node
npm install -g @vue/cli @vue/cli-service-global

vueプロジェクトの作成

以下のコマンドでvueのプロジェクトを作成します。

vue create <project-name>

上記のコマンドを実行すると、以下のような選択を迫られます。
今回は、defaultではなくManually select featuresを選択しました。
Manually select featuresを選択すると

❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

このような選択を迫られます。
必要なプラグインを選択すると、面倒な設定を全部してくれるっぽいです。神ですね。
ちなみに、プロジェクトを作成した後から、追加したい場合は、

vue add <plugin-name>

と実行すると、これまた面倒な設定などを行ってくれます。

作成したプロジェクトは、下記のような構造になっています。

<project-name>/
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
└── src

動作確認

プロジェクトが作成できたら、プロジェクトのあるディレクトリに移動して、

$ npm run serve

と実行するとサーバが立ち上がります。
以下のような画面が出ると、成功です。

なぜこのような画面が表示されるかを少し追ってみます。
詳しくはわかりませんが、vue-cli-serviceが上手くやってくれているのだと思います。
トップページは、public/index.htmlになります。

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

index.htmlの中の<div id="app"></div>が少し重要です。

次に、src/main.jsを見てみます。

src/main.js

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

Vue.config.productionTip = false

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

このmain.jsは先ほどのindex.htmlの<div id="app"></div>に対して、App.vueを描画しています。

今度は、src/App.vueとApp.vueのなかで呼び出されているコンポーネントを見てみます。

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/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
// 長くなるので割愛
</style>

このApp.vueがこの画面の正体というわけです。

終わりに

vue-cliでプロジェクト作成の概要が少しでもお分りいただけたら幸いです。
ぜひこれを機にvue.jsを触ってみてください！

超入門 vue-cli プロジェクト作成

はじめに

環境

vueプロジェクトの作成

動作確認

終わりに