CDNを使ってVue.jsをする方法

CDNを使ったVue.jsをする方法の詳しい記事が見つけられなかったので解説します。

※CDN(Content Delivery Network)
VueのCDNは以下
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

Vue.jsの公式サイト(CDNが記載されているページ)
https://jp.vuejs.org/v2/guide/installation.html

使用する環境は以下

エディター : VSCode
ブラウザ : GoogleChrome

手順

①ファイル新規作成し、名前を`index.html`にします

②ディレクトリ作成し、名前を`css`にします

③`css`ディレクトリ直下に、ファイルを新規作成し名前を`main.css` とします

④ディレクトリ作成し、名前を`js`にします

⑤`js`ディレクトリ直下に、ファイルを新規作成し名前を`main.js`とします

⑥`index.html`に以下のように記述します

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

⑦`main.js`に以下のように記述します

main.js

var app = new Vue({
  el: "#app",
  data:{
    message: "Vue.js"
  }
})

⑧main.cssに以下のように記述します
main.css

p {
  color: red;
}

⑨index.htmlファイルの上で右クリック→このアプリケーションで開く→GoogleCheromeを選択

⑩以下のようにブラウザに表示されれば成功！