vue3.0 プロジェクトを素早く構築するための手順を完了する

1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを確認する必要があります。

//最新のvue/cliをインストールします
糸グローバル追加 @vue/cli 
//またはnpm install -g @vue/cli

vue -Vを使用して、インストールされているバージョン番号を確認し、正常にインストールされていることを確認します。

2. vue/cli3で最初のプロジェクトを作成する

vue でプロジェクトを作成

 ? プリセットを選択してください: (矢印キーを使用)
 default (babel, eslint) // デフォルトオプション 手動で機能を選択 // 手動で機能を選択

明らかに、上記の 2 つのオプションはデフォルトのオプションです。最初のステップでは、手動カスタマイズオプションを選択します。

? プリセットを選択してください: 機能を手動で選択
? プロジェクトに必要な機能をチェックします: (選択するには <space> を、すべてを切り替えるには <a> を、選択を反転するには <i> を押します)
>( ) Babel // コードのコンパイル( ) TypeScript // ts
( ) プログレッシブ ウェブ アプリ (PWA) サポート // プログレッシブ ウェブ アプリケーションのサポート ( ) ルーター // vue ルーティング ( ) Vuex // 状態管理モード ( ) CSS プリプロセッサ // CSS 前処理 ( ) リンター / フォーマッタ // コード スタイル、フォーマット検証 ( ) ユニット テスト // ユニット テスト ( ) E2E テスト // エンドツーエンドのテスト

このステップでは、プロジェクトのニーズに応じて必要な構成をいくつか選択します。すべて選択するか、スペースで単一選択するか、必要な構成項目のスペースを押して、選択後に Enter キーを押して確認します。

ルーター

ルートが履歴モードを使用するかどうかは、プロジェクトの要件に応じて選択します

CSS プリコンパイル

このステップでは、プロジェクトの要件に応じて、node-sass プリプロセスタイプを選択し、css プリコンパイルタイプを選択します。

ESLint 構文チェッカー

? リンター/フォーマッタ設定を選択します: (矢印キーを使用)
> エラー防止のみの ESLint // エラーのみを報告ESLint + Airbnb 設定 // 非厳密モードESLint + 標準設定 // 通常モードESLint + Prettier // 厳密モードTSLint (非推奨) // TypeScript 形式検証ツール

このステップはプロジェクトの要件に応じて選択することもできます

? 追加の lint 機能を選択します: (選択するには <space> を押し、すべてを切り替えるには <a> を押し、選択を反転するには <i> を押します)
>(*) 保存時にリント // 保存時に検出 ( ) コミット時にリントと修正 // 修正して送信時に検出

検証モードを選択します。私は保存時に検証することを選択しました。また、保存時に検証することを選択することをお勧めします。また、時間内にいくつかの文法プロンプトを変更することもできます。これは、文法調整に便利です。

Babel、ESLint などの設定をどこに配置するのがよいでしょうか? (矢印キーを使用)
> 専用の設定ファイル内 // 専用の設定ファイル内 package.json 内 // package.json 内

Babel、ESLint などのカスタム構成の保存場所を選択します。ここでは最初のものを選択することをお勧めします

現在選択されている設定項目を保存するかどうか。現在の設定を頻繁に使用する場合は、y を選択して現在の設定項目を保存することをお勧めします。

プロジェクトを実行する

この時点でプロジェクトは構築されました。プロンプトに従ってプロジェクトを実行してみましょう。

cd メイプロジェクト
糸サーブ

Vue のアップグレード

プロジェクトはすでに実行されていますが、3.0 構文を使用して直接開発すると問題が発生することを指摘する必要があります。

<テンプレート>
  <div class="home">
    {{メッセージ}}
  </div>
</テンプレート>

<スクリプト>
'vue' から { toRefs, reactive } をインポートします
エクスポートデフォルト{
  名前: 'ホーム'、
  セットアップ: () => {
    定数状態 = リアクティブ({
      メッセージ: 'Hello World'
    })
    戻る {
      ...toRefs(状態)
    }
  }
}
</スクリプト>

msg ページを直接レンダリングすると、常に msg 変数が初期化されていないというエラーが表示されます。

ここでは急いでいません。package.json を見て、vue のバージョンをチェックし、なぜ 3.0 構文をサポートしていないのか確認してみましょう。問題はまさにここにあります。

案の定、まだバージョン2.xxなので、バージョンをアップグレードしましょう

vue に vue-next を追加

アップグレード後、package.json を確認すると、すでにバージョン 3.0.0-beta.1 であることがわかりました。

アップグレード後、プロジェクトをyarn serveで実行してみましょう。

案の定、現実はいつも私を打ちのめし、それでも実行されません。エラーに応じて min.js を見てみましょう。

輸入 {
  アプリを作成
} から 'vue'
'./App.vue' からアプリをインポートします。
'./registerServiceWorker' をインポートします
'./router' からルーターをインポートします
'./store' からストアをインポートします

createApp(App).use(router).use(store).mount('#app')

いくつかの小さな調整を行ったところ、予想どおりプロジェクトは正常に実行されました。定義した msg 文字列もページに表示されます。

これまで、最初のvue3プロジェクトを実行してきました。

3. vue2.0 と比較した vue3.0 の改善点と新機能

1. vue2.0 と比較すると、パフォーマンスが大幅に向上しました。(作者によると、30%～300% のパフォーマンス向上があります)

2. vue2.0 と比較して、パッケージサイズが大幅に削減されました。ツリーシェイキングサポートを使用して、不要なモジュールをクリップし、必要なものだけをパッケージ化することで、パッケージサイズが大幅に削減されました。

3. カスタムレンダリング API を公開し、スケーラビリティを向上しました。

4. 基礎レイヤーは TypeScript で完全に書き直されており、TS を適切にサポートできます。

5. 新機能: コンポーネントロジックをより侵襲性が低く、より柔軟な方法で組み合わせることができる、composition-api を追加しました。

要約する

これで、vue3.0 プロジェクトの素早い構築に関するこの記事は終了です。vue3.0 プロジェクトの素早い構築に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: