めっちゃ簡単なVue 3の部分的導入と便利なインテリセンス有効化の方法

# はじめに
Vue 3をSPAではなく部分的に導入する方法とVSCode でVue 3 のインテリセンスを有効にする方法がわかったのでメモしておきます。
正攻法として`npm init vue@latest`などを使ってVue 3を導入している分にはこの記事は必要ないと思います。
あと、Vue 3 ではTypeScriptの本格的なサポートがされたらしいのでTypeScriptを使おうと思っている人にもあんまり必要ないかもしれない。

# 環境&使用したもの
* npm --> version 8.11.0
* VSCode --> version 1.69.2

# ディレクトリ構成（部分的導入完了後）
※ ディレクトリ構成については手順がわかりやすいように記載してるが、こういった構成じゃないと導入できないわけではなく、任意のディレクトリ構成で全然問題ない。
```
.
│  package-lock.json
│  package.json
│
├─node_modules
│  │  .package-lock.json
│  <割愛>
│
└─src
    ├─html
    │      index.html
    │
    └─js
        │  index.js
        │
        └─lib
                vue.global.js
                vue.global.prod.js
```

# Vue 3の部分的導入手順
1. Vue 3 モジュールのダウンロード
   ```bash:cmd
   npm init
   npm i vue@3.2.36 --save-dev
   ```
1. Vue 3 のスクリプト（実態）を公開用ディレクトリにコピー
   ```bash:cmd
   cp node_modules\vue\dist\vue.global.js src\js\lib
   cp node_modules\vue\dist\vue.global.prod.js src\js\lib
   ```
1. htmlへVue 3 のスクリプト導入＆導入したい部分を定義
   ```html:src/html/index.html
   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <title>Vue3 インテリセンス</title>
           <link href="/favicon.ico" type="image/x-icon" rel="icon" />
           <link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />
           <script src="../js/lib/vue.global.js"></script> <!-- 追加：Vue 3 のスクリプト導入 -->
           <script src="../js/index.js"></script>
       </head>

       <body>
           <h1>Vue3 インテリセンス</h1>
           <div id="app">{{ message }}</div> <!-- 追加：導入したい部分を定義 -->
       </body>
   </html>

   ```
1. Vue 3 でプログラミング
   ```js:src/js/index.js
   document.addEventListener('DOMContentLoaded', function () {
        const { createApp } = Vue // 「vue.global.js」にはグローバル変数が定義されている
        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }).mount('#app')
    });

   ```
   これで導入完了！めっちゃ簡単！「index.html」をブラウザで表示するとこんな感じ！
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388393/df8e683a-b402-e3bf-2bba-a92ae3c02563.png)

## ここからはJSでVue 3 のインテリセンスを有効にする方法
1. Vueの変数定義部分にJSDock追加
   ```js:index.js
   document.addEventListener('DOMContentLoaded', function () {
        /**
         * ★ 以下のJSDocの記述を行うことでインテリセンスが効くようになる
         * @type { import("vue") }
         */
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }).mount('#app')
    });

   ```
   以上！こんな感じでインテリセンスが有効になる！
![Intellisense.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388393/43730448-1008-b00d-a00f-abea1ba7f618.gif)

# 所感
やることがわかればVue 3 の部分的、段階的導入は実は簡単だった。
部分的導入をした場合のVSCodeでのインテリセンスの有効化の方法がわからなくて焦った。。
部分的、段階的に導入、かつ、Typescriptじゃない状況で開発する人はすくなからずいると思うのでそういった人の助けになれれば幸いです。


* 参考にさせていただいた記事などのLink集
    * https://v3.ja.vuejs.org/guide/installation.html#インストール
    * https://v3.ja.vuejs.org/guide/installation.html#cdn-を利用、またはバンドラーを使用しない場合
    * https://www.typescriptlang.org/ja/docs/handbook/jsdoc-supported-types.html
    * etc...