vue3 プロジェクトを作成する

(1)viteで作成

viteとは (https://cn.vitejs.dev/guide/)

Vite (フランス語で「クイック」、発音は/vit/、「veet」のように発音) は、フロントエンド開発エクスペリエンスを大幅に改善できる新しいフロントエンド構築ツールです。主に次の 2 つの部分で構成されます。

• 驚くほど高速な Hot Moduleネイティブ ES モジュールに基づく豊富な組み込み機能を提供する開発サーバー。

• Rollupを使用してコードをパッケージ化する一連のビルド手順であり、本番環境で使用するために高度に最適化された静的アセットを出力するように事前構成されています。

Vite はすぐに使用できる構成を提供することを意図しており、そのプラグインAPIとJavaScript API は高度な拡張性と完全な型のサポートをもたらします。

• Vite は、より軽量 (高速ホット アップデート、高速パッケージ ビルド) の Vue プロジェクト スキャフォールディング ツールです。
• vue-cli と比較すると、デフォルトでインストールされるプラグインは非常に少なく、開発プロセスが増えるにつれて、追加の構成が必要になります。

vue3 プロジェクトの作成方法

cmd でターミナルを開き、コマンドを入力してEnter キーを押すとcreate-vite がnpm init vite 项目名称ポップアップしますOK 続行しますか? Y/n (y を選択して Enter キーを押します。vite を使用してプロジェクトを作成するのはこれが初めてで、がポップアップしますが、初めてでなければポップアップしません)入力後、選択フレームがポップアップします。ここで vue を選択します (上下キーで選択します)。

プロジェクト言語を選択

プロジェクトが正常に作成されました

プロンプトに従って順番にプロジェクト ディレクトリに入り、依存関係をインストールします。

最後にプロジェクトを実行します

vite によってデフォルトでインストールされるプラグインはほとんどなく、その他のいくつかは追加で構成する必要があります。(ルーター)
cnpm i vue-router を使用してルーターをインストールし、main.js で構成します。

src フォルダーに router フォルダーを作成して index.js ファイルを作成し、index でルーティングを構成します

基本構成完了

(2) vue-cli で作成

cmd ターミナルを開き、コマンドを入力し、 vue create 项目名称カスタムを選択して、インストール プリセットを選択します。

必要に応じて選択 (スペースを選択、上下キーで選択)

vue3 プロジェクトを選択

ニーズに合わせてお選びください

CSS プリプロセッサとして less を選択

ニーズに合わせてお選びください

正常に作成されました

vue-cli と vite の長所と短所

ビュークリ

長所: 実戦でテスト済み、信頼性が高く、Vue 2 と互換性があり、あらゆる種類の依存関係をバンドルでき、プラグイン エコシステムがあり、さまざまな目的のために構築できる 短所: 開発サーバーの速度は依存関係の数に反比例
する

速い

長所: 開発サーバーは Webpack よりも 10 ～ 100 倍高速で、コード分割が優先されます
最新のブラウザー (ES2015+) のみをターゲットにできます
短所: CommonJS モジュールと完全には互換性がありません。など、さまざまな開発サーバーとビルド ツール