【初心者必見】Vueの導入方法を解説！CDNとnpmを使った方法を紹介

Vue.jsとは？
Vue.jsを導入する方法
初めての方は、CDNでサクッと試すのがおすすめです。
1. CDN
2. Vue CLI（npm）
Vue.jsとJavaScriptの記述方法比較
1. Vueの導入事例
まとめ
1. おすすめの参考書

Vue.jsとは？

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワーク です。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツール や**サポートライブラリ** と併用することで、洗練されたシングルページアプリケーションの開発も可能です。
https://jp.vuejs.org/v2/guide/

https://jp.vuejs.org/v2/guide/

vueは簡単に言うとJavaScriptをより扱いやすくしてくれるためのフレームワークと思って貰えればいいと思います。

JavaScriptのフレームワークはVue.js以外にも

「React」
「Angular」
「jQuery」

があり、この中でも、最近では「React」と「Vue」が人気です。

Vue.jsを導入する方法

Vue.jsの導入方法はいくつかあります。

CDN
Vue CLI (npm)

今回は上記2つの導入方法について解説をしてきます。

初めての方は、CDNでサクッと試すのがおすすめです。

CDN

CDNでの導入は非常に簡単です。

<script src="<https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js>"></script>

上記のコードをhtmlのコードに書き込むだけです。

※ vue@2.6.14の部分はバージョンを表します。バージョンによっては、不具合などでうまく動かない場合があるので、もしうまく動かない場合はバージョンを確認してみてください。

<!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">
  <title>Document</title>
  <script src="<https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js>"></script> <!-- ←CDNの記述 -->
</head>

<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>

</html>

上記のコードはCDNでVue.jsを読み込んで「Hello Vue!」を表示させるためのコードです。

Vue CLI（npm）

NPMが必要なので、NPMのインストールが終わっていな方は、インストールを行ってからお試しください。

NPMが導入されているかわからない方は、

Windows：コマンドプロンプトもしくはPowershell

Mac：ターミナル

で下記のコマンドを打って見てください。

npm -v
// 8.1.0

インストールされている場合は、バージョンが表示されます。

今回私の環境では、「8.1.0」のバージョンを使用しています。

インストールでいていない場合は、npmのインストールを行ってから、また戻って来てください。

Vueのインストール

まずはVueのインストールです。

npm install vue

次にVue CLIのインストールを行って行きます。

npm install -g @vue/cli

次は正常にインストールできているのか確認します。

vue --version

上記のコマンドを実行すると「command not found: vue」のエラーがでた場合はパスが通っていないので、パスを通して上げる必要があります。

※エラーが出た場合は下記のコマンドを実行しみてください。

export PATH=$PATH:/Users/ユーザー名/.npm-global/bin

Vue CLIのプロジェクトの作成

vue create hello-world

上記のコマンドを実行するとVue CLIのプロジェクトの作成が開始されます。

ファイル構成

.
├── README.md
├── babel.config.js
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vue.config.js

Vue.jsとJavaScriptの記述方法比較

JavaScript側定義したテキストを表示

Vue.jsと普通のJavaScriptでは記述方法が異なるので、違いについて見ていきます。

1つ目は「Vue.js」の記述方法で2つ目は「JavaScript」の記述方法です。

Vue.js

See the Pen Untitled by xhisashix (@xhisashix) on CodePen.

JavaScript

See the Pen JavaScpript by xhisashix (@xhisashix) on CodePen.

ボタンをクリックしたときの処理

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="changeMessage">変更</button>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      changeMessage: function() {
        this.message = 'Goodbye Vue!'
      }
    }
  })
</script>

文字の反転

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">変更</button>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })
</script>

inputに入力した文字を表示

<div id="app">
  <h1>{{ inputData }}</h1>
  <input type="text" v-model="inputData">
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      inputData: '',
    },
  })
</script>