Vue3+スクリプト設定+ts+Vite+Volarプロジェクト

長い間書いていませんでした。最近、Vue3.2 がリリースされたのを見ました。ああ、また書き始める時期でしょうか?
実は私自身は Vue3 を使って実際のプロジェクトを開発したことはないのですが、今は新しいものが出てきています…
新時代の移民労働者は実際に左手で働き、右手で遊び、また手を使って勉強もします。

何？ デートするってことですか？ xswlさん、私のような移民労働者がデートする資格を得るにはどうしたらいいのでしょうか？

丸まらなきゃ。友達が友達の輪に何を投稿したか見てみよう。まあ、それはまだ永遠の香りです

では、早速始めましょう〜

Viteを使用してvue + tsプロジェクトを作成する

Vite公式ガイドを参照

プロジェクトテンプレートを実行して作成する

	$ npm init vite@latest
	√ プロジェクト名: ... v3_demo
	√ フレームワークを選択: » vue
	√ バリエーションを選択: » vue-ts
	
	C:\Users\admin\Desktop\v3_demo のスキャフォールディング プロジェクト...
	
	完了です。次のコマンドを実行します:
	
	  cd v3_デモ
	  npmインストール
	  npm 実行 dev

プロジェクトディレクトリ構造の説明

	
	├── public # パッケージ化する必要のない静的リソース │ └── favicon.ico
	├── 出典
	│ ├── api # バックエンド API インターフェースのカプセル化 │ ├── asset # パッケージ化する必要がある静的リソース │ ├── components # パブリック コンポーネント │ ├── composables # 一般的なコンポーザブル API
	│ ├── layout # ページレイアウトテンプレート │ ├── plugins # プラグイン │ ├── router # ルーティング │ ├── store # Vuex ストレージ │ ├── colors # スタイル │ └── index.scss # グローバル共通スタイル │ ├── utils # ツールモジュール │ ├── views # ルーティングページ │ ├── App.vue # ルートコンポーネント │ ├── main.ts # エントリモジュール │ ├── shims-vue.d.ts # 補足 .vue モジュール型宣言 │ └── vite-env.d.ts # 補足 vite 型宣言 ├── .gitignore
	├── README.md
	├──index.html
	├── package-lock.json
	├── package.json
	├── tsconfig.json
	└── vite.config.ts

プロジェクトを作成した後、依存パッケージをインストールして再度実行する必要がありますが、実行すると直接エラーが報告されます。

admin@DESKTOP-ABKQLS5 C:\Users\admin\Desktop\v3_demo
$ npm 実行 dev

> [email protected]
> ヴィテ

イベント.js:292
throw er; // 処理されない「エラー」イベント
^

エラー: C:\Users\admin\Desktop\v3_demo\node_modules\esbuild\esbuild.exe ENOENT を生成しました
Process.ChildProcess._handle.onexit (internal/child_process.js:269:19) で
onErrorNT (internal/child_process.js:465:16) で
processTicksAndRejections (internal/process/task_queues.js:80:21) で
ChildProcess インスタンスで次の場合に「エラー」イベントが発生しました:
Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) で
onErrorNT (internal/child_process.js:465:16) で
processTicksAndRejections (internal/process/task_queues.js:80:21) で {
エラー番号: -4058、
コード: 'ENOENT'、
システムコール: 'C:\\Users\\admin\\Desktop\\v3_demo\\node_modules\\esbuild\\esbuild.exe を起動',
パス: 'C:\\Users\\admin\\Desktop\\v3_demo\\node_modules\\esbuild\\esbuild.exe',
生成引数: [ '--service=0.12.22', '--ping' ]
}

解決策: node ./node_modules/esbuild/install.js

Vite によって作成されたプロジェクトでは、ESLint はデフォルトでは利用できません。

Vite の TS の説明

Vite は当然ながら .ts ファイルのインポートをサポートしています。
Vite は .ts ファイルの翻訳のみを実行し、型チェックは実行しません。また、型チェックは IDE またはビルド プロセスによってすでに処理されていると想定します (ビルド スクリプトで tsc --noEmit を実行するか、vue-tsc をインストールしてから vue-tsc --noEmit を実行して *.vue ファイルの型チェックを行うことができます)。
Vite は esbuild を使用して TypeScript を JavaScript に変換します。これは tsc よりも約 20 ～ 30 倍高速です。同時に、HMR の更新がブラウザーに反映されるまでの時間は 50 ミリ秒未満です。
esbuild は型情報なしでトランスパイルのみを実行するため、定数列挙や暗黙の「型のみ」インポートなどの TypeScript 固有の機能はサポートされないことに注意してください。 TS が分離コンパイル モードで動作しない機能について警告するように、tsconfig.json のcompilerOptions で "isolatedModules": true を設定する必要があります。

vue-tsc と tsc
tsc は ts コードタイプのみを検証できます
vue-tsc は ts + Vue テンプレート (Volar ベース) の型を検証できます。
TS タイプの検証を個別に実行するには、package.json に scripts スクリプトを追加することをお勧めします。

「スクリプト」: {
	  ...
	  "ビルド": "npm run tsc && vite ビルド",
	  "tsc": "vue-tsc -noEmit"
	}

-noEmit は、型の検証のみを行い、コンパイル結果を出力しないことを意味します。

サードパーティのパッケージ タイプ チェックをスキップするには、tsconfig.json に以下を追加します。

	{
	  "コンパイラオプション": {
	    ...
	    "ベースURL": "./",
	    "skipLibCheck": true
	  }
	}

Vue3のTS構文についてはここでは説明しません。知らない人は公式ドキュメントを参照してください。

Vue 3の3つの構文

「湘湘豆」の「湘」の書き方は4種類あり、「働く人」の「Vue3」の構文も3種類あります。時代は変化していますが、私たちの初心は変わりません。以下をお読みください。

オプションAPI

これについては詳しく説明しません。Vue の書き方を知っている人なら誰でも知っているでしょう。これは、Vue2 で最もよく使用されるオプション API です。

コンポジションAPI

Combination API は、Vue3 の誕生以来最も話題になっている構文アップデートであり、以下のスクリプト設定構文の基礎でもあります。

フロントエンドの使い方がまだわからない場合は、急いで学習してください。コンポジションAPI

スクリプトのセットアップ (Composition API の構文糖)

<script setup>単一ファイル コンポーネント (SFC) で Composition API を使用するためのコンパイル時の構文糖衣です。通常と比較して

定型文が少なくなり、コードがきれいになります。
純粋な Typescript を使用してプロパティを宣言し、イベントを発行する機能。
実行時パフォーマンスが向上します (テンプレートは中間プロキシなしで、同じスコープ内のレンダリング関数にコンパイルされます)。
IDE 型推論パフォーマンスが向上します (言語サーバーがコードから型を抽出する作業が軽減されます)。

Yuxi You の記事のスクリーンショットはここには掲載しません。スクリプト設定は正式に実験段階を卒業し、安定版として利用できるようになりました。

セットアップが追加されたスクリプト タグでは、メソッドを宣言する必要はありません。この書き方により、すべてのトップレベルの変数と関数がテンプレートに自動的に公開され、使用できるようになります。

ここで強調したいのは、「テンプレートに公開することは、外の世界に公開することと同じではない」ということです。

HelloWorld.vue プロジェクト テンプレートを例にとると、Composition API の構文は次のようになります。

	
	<script lang="ts">
	「vue」から ref、defineComponent をインポートします。
	エクスポートデフォルトdefineComponent({
	  名前: "HelloWorld",
	  小道具: {
	    メッセージ: {
	      タイプ: 文字列、
	      必須: true、
	    },
	  },
	  セットアップ: () => {
	    定数count = ref(0);
	    {count}を返します。
	  },
	});
	</スクリプト>

セットアップを使用した後:

	<script lang="ts" セットアップ>
	"vue" から { ref, defineProps } をインポートします。
	定数count = ref(0);
	const props = defineProps({
	  メッセージ: {
	    タイプ: 文字列、
	    必須: true、
	  },
	});
	</スクリプト>
	

具体的な構文については、スクリプトの設定を参照してください。

Volarをインストールする

Volar は vscode 用のプラグインで、非常に優れた機能を提供します。

インストール方法は非常に簡単です。vscode プラグインマーケットで volar を検索し、クリックしてインストールするだけです。

私が非常に満足している機能をいくつか紹介します。

エディタークイック分割
Vue の単一ファイル コンポーネントには、機能に応じて、テンプレート、スクリプト、スタイルの 3 つのルート要素があります。
Volarをインストールすると、vscodeの右上隅に小さなアイコンが表示されます。

これをクリックすると、vue ファイルは機能に応じて 3 つのウィンドウに分割され、各ウィンドウが独自の機能を担当します。他の 2 つのルート要素は結合されます。

つまり、テンプレート、スクリプト、スタイルを簡単に区別し、ファイルを 3 つのウィンドウに分割して 3 つのファイルとして使用できます。すべてのプラグインがそれを完了するのに役立ちます。クリックするだけです。

スタイルクラス参照

クラス名 .someclass の上に、1 参照という小さなアイコンがあります。これは、現在のクラスに 1 つの参照があることを意味します。この 1 参照をクリックすると、ポップアップ ウィンドウが表示され、現在のクラスの具体的な使用場所が表示されます。

クラストレース

テンプレート内のクラス属性を使用する要素で、Ctrlキーを押しながら左クリックします。

クラス名の場所に直接ジャンプします

結論

上記は、vue3 + スクリプト セットアップ + ts + vite + volar プロジェクトを作成する基本的なプロセスです。もちろん、 UI コンポーネント ライブラリだけでなく、vue-router@4 と vuex@next もインストールする必要があるため、まだ終わりではありませんが、これらは比較的基本的なものであり、友人でも簡単に実行できます。

これで、Vue3+script setup+ts+Vite+Volar プロジェクトに関するこの記事は終了です。Vue3+script setup+ts+Vite+Volar に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。