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

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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 完全な Vue3.0+ts プロジェクトを構築する手順
  • vite+vue3+element-plus プロジェクトをビルドする手順
  • Vue3.0 プロジェクト構築概要(詳細手順)
  • vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明
  • Vue3.0プロジェクトの構築と利用プロセス
  • vue3.0プロジェクトアーキテクチャを段階的に構築する方法を教えます

<<:  Linux の 5 ステップ ビルド カーネル ツリー

>>:  MySQL での select、distinct、limit の使用

推薦する

Vue+SpringBoot+Shiroのクロスドメイン問題を解決する

目次1. Vueフロントエンドを構成する1. クロスドメイン構成を開発する2. 本番環境のクロスドメ...

MySQL 5.7.18 無料インストール版ウィンドウ設定方法

初めてのブログです。データベースの勉強を始めた頃のことを書いています。自分でダウンロードしたのですが...

OCSP を有効にすると、https 証明書の検証効率が向上し、Let's Encrypt SSL 証明書へのアクセスが遅くなる問題が解決されます。

ここ数日、ウェブサイトを初めて開いたときにアクセスが非常に遅いのですが、その後はページが正常に開きま...

Dockerを使用してgitlabコミュニティの中国語版を構築する詳細なプロセスを教えます

1. Docker Composeを使用して起動を構成するDocker Compose を知らない場...

QQtabBar による CSS 命名仕様 BEM の詳細な紹介

QQtabBar の BEMまず、BEMとはどういう意味でしょうか? BEM は、ブロック、要素、修...

Tomcat で静的リソースを処理するチュートリアル

序文Tomcat 内のすべてのリクエストは Servlet によって処理され、静的リソースも例外では...

HTML タグ マーキーを使用してスクロール効果を実現する簡単な方法 (必読)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...

Jenkinsはマイクロサービスをパッケージ化してDockerイメージを構築し、実行します。

目次環境の準備始める1. GitLabリモートリポジトリがマイクロサービスプロジェクトを作成する2....

React スキャフォールディングの構築方法を学ぶ

1. フロントエンドエンジニアリングの複雑さいくつかの小さなデモ プログラムを開発するだけであれば、...

MySQL 8.0.12 解凍バージョンのインストールチュートリアル

この記事では、MySQL 8.0.12解凍版のインストールチュートリアルを参考までに紹介します。具体...

コンテンツウェブページの画像プレビューのデザイン

<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...

初心者でもjsのtypeofとinstanceofの違いを理解できます

目次1. 型2. インスタンス3. 違い1. 型typeof 演算子は、評価されていないオペランドの...

Nexus を使用して jar パッケージをプライベート サーバーに追加する方法

なぜ Nexus プライベート サーバーを構築する必要があるのでしょうか。その理由は非常に簡単です。...

プロジェクトにおける CSS グリッドシステムの柔軟な使用方法の詳細な説明

序文CSS グリッドは通常、さまざまなフレームワークにバンドルされていますが、実際のビジネス ニーズ...

forループ内のvarの問題の解決

序文var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変...