Vue CLIとは。秒でHello worldするまで

公開日:2021-10-21 更新日:2021-10-22

HTML/CSS Javascript Vue.js

t f B! P L
20211021_vue-cli_2
  1. Vue CLIとは
  2. Vue CLIでHello Worldするまで
  3. Vue CLIのHelloWorldが表示される仕組み
  4. Vue CLIで開発したプロジェクトをbuildする

Vue CLIとは

「Vue CLIとは、Vueをコマンドラインで開発できるもの」とよく紹介されているが、
何が嬉しいかというと、
そこそこ規模のフロントエンドの開発が圧倒的に簡単にできること

複数の.vueファイルを使ってVue CLIの簡単なルールに沿って記載しWebサイトを作成、
最後にBuildコマンドを使って、「.html」「.css」「.js」ファイルにいい感じにまとめてくれる

普通、.htmlにはhtmlを書いて、.cssにはcssを書いて、.jsにはJavaScriptを書くが、
.vueファイルはhtmlとcssとJavaScriptを同じファイルに記載する

.vueファイルの構成は以下の通り

<template>
  <!--ここにHTMLを書く-->
</template>
<script>
  /* ここにJavascriptを書く */
</script>
<style scoped>
  /* ここにCSSを書く */
</style>

これをページごとに作成して開発し、
htmlは.htmlに、cssは.cssに、JavaScriptは.jsに、まとめてくれる

まとめてくれる際に、余計なコメントなども排除したり、サクサク動くWebページに最適化してくれる

20211021_vue-cli_1

Vue CLIでHello Worldするまで

百聞は一見に如かず
実際にVue CLIを動かしてみる

Vue CLIのインストール

% npm install -g @vue/cli
...
...
+ @vue/cli@4.5.14
added 1 package from 1 contributor, removed 1 package and updated 29 packages in 49.034s

任意の名前でプロジェクトの作成
Vueのバージョンはデフォルトの2を選択する
(3はBootstrapVueに対応していないので、、)

% vue create vue_test
...
...
Vue CLI v4.5.14
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features
...
...
🎉  Successfully created project vue_test.
👉  Get started with the following commands:

 $ cd vue_test
 $ npm run serve
 

プロジェクトディレクトリに移動し、
動かしてみる

% cd vue_test
% npm run serve
...
...
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.xx.xx:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

「http://localhost:8080/」にブラウザでアクセスすると初期ページが表示される
20211021_vue-cli_2

Vue CLIのHelloWorldが表示される仕組み

プロジェクトの初期ディレクトリ構成はこんな感じ

% tree -L 1
.
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src

3 directories, 4 files

publicディレクトリ配下には、最初に呼び出されるindex.htmlファイルが配置されている

% tree public -L 1
public
├── favicon.ico
└── index.html

0 directories, 2 files

index.htmlの中身は以下の通り

% cat public/index.html
<!DOCTYPE html>
<html lang="">
  <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>

最初に呼ばれるJavaScript(main.js)はsrc配下に配置されている

% tree src 
src
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
└── main.js

2 directories, 4 files

中身を見ると、
App.vueの中身を、先ほど見たindex.htmlの#app部分に表示すると書いてある

% cat src/main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

App.vueを見てみる
上で紹介した、.vueファイル形式で書かれている
中身を見ると、ロゴの下に、./components/HelloWorld.vueを読み込んだ内容を表示している

% cat 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>

HelloWorld.vueの中身はこんな感じ

% cat 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>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

まとめると、以下のようなイメージ
このように入れ子にすると、状況に応じて動的にページの一部の表示内容を変えたりできるようになる

20211021_vue-cli_3

Vue CLIで開発したプロジェクトをbuildする

開発が終わったらbuildをする

% npm run build

これをすると、開発したコードがdistというディレクトリにまとめられる

% tree ./dist -L 1
./dist
├── css
├── favicon.ico
├── img
├── index.html
└── js

3 directories, 2 files

この一式をそのままWebサイトのルートディレクトリに配置すればOK
(ルートディレクトリでないとうまく動作しない模様)

以上。

About me

ゆかき(♀)

アラサー駆け出しインフラエンジニア
ど文系営業からSEへ転身し日々奮闘している人

一児の母

#AP応用情報 #HTML5Lv1 #第2種電気工事士 #DCP(Data Center Practitioner) #LPIC Lv2 #VCP6.5 #CCNP #Oracle Bronze #HTMLv5 #TOEIC860

Media

こちらのイベントで記事紹介いただいていた、嬉しい。

Line stamp

僭越ながら販売中

Green cat & Orange cat

Amazon