Vite2.x は Vue3 プロジェクトを作成します

この章の主な内容:

1. プロジェクトの作成
2. プロジェクトの初期化 (パスエイリアス、CSS プリコンパイル、静的リソース参照)
3. vue-router を統合する
4. vuexの統合

1. プロジェクトを作成する

vite2.x を使用してプロジェクトを作成するコマンド

npm init vite 项目名

ここで vite2-demo プロジェクトを作成し、開発言語として vue + ts を選択しました。

2. プロジェクトの初期化 (パスエイリアス、CSS プリコンパイル、静的リソース参照)

パスエイリアスの設定

次のコードを vite.config.ts ページに追加します。

赤い波線がある場合、問題を解決するには @type/node をインストールする必要があります

次のコードを tsconfig.json ページに追加します。

Sassをインストールする

npm i -D sass

インストールが完了すると、lang='scss' で scss を使用できるようになります。

3. vue-router を統合する

main.ts を変換する

vue-router をインストールする

npm i vue-router@4

src ディレクトリに router フォルダを作成し、そのフォルダの下にindex.ts ファイルを作成します。

効果を示すために、src ディレクトリに新しいビュー フォルダーを作成し、Home.vue と About.vue の 2 つのページを作成します。

main.ts にコードを追加し

、最後に App.vue ページを変更して効果を確認します。

4.vuexの統合

vuex をインストールする

npm i vuex@next --save 

src ディレクトリに新しいストア フォルダーを作成し、新しいindex.ts ページを作成します。

次のコードを main.ts ページに追加します。

テストを容易にするために、Home.vue ページを変更します。

基本的なプロジェクトが完了しました