vue3.0 基本プロジェクトを構築するにはどうすればいいですか? 1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを確認する必要があります。//最新のvue/cliをインストールします 糸グローバル追加 @vue/cli //またはnpm install -g @vue/cli
2. vue/cli3で最初のプロジェクトを作成する
? プリセットを選択してください: (矢印キーを使用) 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なので、バージョンをアップグレードしましょう
アップグレード後、package.json を確認すると、すでにバージョン 3.0.0-beta.1 であることがわかりました。 アップグレード後、プロジェクトを 案の定、現実はいつも私を打ちのめし、それでも実行されません。エラーに応じて 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux の 5 ステップ ビルド カーネル ツリー
>>: MySQL での select、distinct、limit の使用
<br />このページはUTF8エンコードを使用しており、ヘッダーとフッターはテンプレー...
序文データベースは常に私の弱点でした。自分の経験 (python+sqlalchemy) を組み合わ...
目次背景例誤解 - コールスタックを表示するためにウォッチでブレークポイントを設定する正しいアプロー...
1. はじめにOracle が MySQL 8.0GA をリリースしました。海外での GA はリリー...
ブラウザベンダーが標準を曲げて、ルールに従わないことをすると、問題や少なくとも混乱が生じる可能性があ...
目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...
今日午後ずっと私を悩ませたバグを記録する半月前から始めましょう。それから.................
問題の背景業務システムのサーバ監視システムからディスク使用率が90%に達したという早期警告通知が来た...
Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...
Shtml と asp は似ています。shtml という名前のファイルでは、asp の命令と同様に、...
プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...
まずコードを見てみましょう #/bin/sh datename=$(日付 +%Y%m%d-%H%M%...
MySQL で中国語を入力すると、次のエラーが発生します。エラー 1366: 1366: 行 1 の...
nginx をコンパイルしてインストールし、一定期間使用した後、現在のバージョンに脆弱性があることや...
この質問をされたとき、私は無知で頭が真っ白になりました。もちろん、正しく答えられませんでした。私はず...