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 の使用
目次1. Vueフロントエンドを構成する1. クロスドメイン構成を開発する2. 本番環境のクロスドメ...
初めてのブログです。データベースの勉強を始めた頃のことを書いています。自分でダウンロードしたのですが...
ここ数日、ウェブサイトを初めて開いたときにアクセスが非常に遅いのですが、その後はページが正常に開きま...
1. Docker Composeを使用して起動を構成するDocker Compose を知らない場...
QQtabBar の BEMまず、BEMとはどういう意味でしょうか? BEM は、ブロック、要素、修...
序文Tomcat 内のすべてのリクエストは Servlet によって処理され、静的リソースも例外では...
ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...
目次環境の準備始める1. GitLabリモートリポジトリがマイクロサービスプロジェクトを作成する2....
1. フロントエンドエンジニアリングの複雑さいくつかの小さなデモ プログラムを開発するだけであれば、...
この記事では、MySQL 8.0.12解凍版のインストールチュートリアルを参考までに紹介します。具体...
<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...
目次1. 型2. インスタンス3. 違い1. 型typeof 演算子は、評価されていないオペランドの...
なぜ Nexus プライベート サーバーを構築する必要があるのでしょうか。その理由は非常に簡単です。...
序文CSS グリッドは通常、さまざまなフレームワークにバンドルされていますが、実際のビジネス ニーズ...
序文var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変...