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 の使用

推薦する

UTF8 でエンコードされた Web ページにファイルが含まれている場合の、ページの前の空白行の解決方法

<br />このページはUTF8エンコードを使用しており、ヘッダーとフッターはテンプレー...

MySQLをシンプルに学ぶ

序文データベースは常に私の弱点でした。自分の経験 (python+sqlalchemy) を組み合わ...

Vue はデータの変更をどのように追跡しますか?

目次背景例誤解 - コールスタックを表示するためにウォッチでブレークポイントを設定する正しいアプロー...

MySQL 8.0 における MySQL のインストールと新しいパスワード認証方法の詳細な説明

1. はじめにOracle が MySQL 8.0GA をリリースしました。海外での GA はリリー...

HTML img タグの alt 属性と title 属性の使い方の紹介

ブラウザベンダーが標準を曲げて、ルールに従わないことをすると、問題や少なくとも混乱が生じる可能性があ...

Vue.jsは背景テーブルコンポーネントのカプセル化を管理します

目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...

システム エラー 1067 のため、MySQL 5.6 解凍バージョン サービスを開始できません

今日午後ずっと私を悩ませたバグを記録する半月前から始めましょう。それから.................

Linuxでファイルを削除してもスペースが解放されない問題の対処方法

問題の背景業務システムのサーバ監視システムからディスク使用率が90%に達したという早期警告通知が来た...

Mysql クエリの結果セットを JSON データに変換するサンプル コード

Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...

shtmlとhtmlの違い

Shtml と asp は似ています。shtml という名前のファイルでは、asp の命令と同様に、...

v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード

プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...

Linux で指定された期間に数分ごとにタスク スケジュール crontab を自動的に実行する方法

まずコードを見てみましょう #/bin/sh datename=$(日付 +%Y%m%d-%H%M%...

MySQL で中国語を入力するときに発生するエラー 1366 の解決方法

MySQL で中国語を入力すると、次のエラーが発生します。エラー 1366: 1366: 行 1 の...

nginx をコンパイルしてインストールした後、スムーズに nginx をアップグレードする方法

nginx をコンパイルしてインストールし、一定期間使用した後、現在のバージョンに脆弱性があることや...

JS 面接の質問: forEach はループから抜け出すことができますか?

この質問をされたとき、私は無知で頭が真っ白になりました。もちろん、正しく答えられませんでした。私はず...