More than 1 year has passed since last update.

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

Last updated at 2022-07-29Posted at 2022-07-27

はじめに

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の部分的導入手順

Vue 3 モジュールのダウンロード
cmd
```
npm init
npm i vue@3.2.36 --save-dev
```

Vue 3 のスクリプト（実態）を公開用ディレクトリにコピー

cmd

cp node_modules\vue\dist\vue.global.js src\js\lib
cp node_modules\vue\dist\vue.global.prod.js src\js\lib

htmlへVue 3 のスクリプト導入＆導入したい部分を定義

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>

Vue 3 でプログラミング

src/js/index.js

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

これで導入完了！めっちゃ簡単！「index.html」をブラウザで表示するとこんな感じ！

ここからはJSでVue 3 のインテリセンスを有効にする方法

Vueの変数定義部分にJSDock追加

index.js

document.addEventListener('DOMContentLoaded', function () {
     /**
      * ★ 以下のJSDocの記述を行うことでインテリセンスが効くようになる
      * @type { import("vue") }
      */
     const { createApp } = Vue
     createApp({
         data() {
             return {
                 message: 'Hello Vue!'
             }
         }
     }).mount('#app')
 });

以上！こんな感じでインテリセンスが有効になる！

所感

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

参考にさせていただいた記事などのLink集

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up