www国产亚洲精品久久,japanese日本护士xxxx18一19,a级毛片免费观看在线

ホームページ

ウェブフロントエンド

jsチュートリアル

React.jsからVue.jsに切り替えてみた

DDD

Nov 05, 2024 am 02:03 AM

導(dǎo)入

數(shù)年前、他の多くの人たちと同じように、私は React.js フロントエンドライブラリのフックと機(jī)能コンポーネントの登場に「興奮」しました。これらは、Components クラスよりもはるかに少ないコードを記述することで、まったく新しい開発方法を提供しました。私はかなりの間、本當(dāng)に夢中になりました。

今日、私はまったく新しいクライアントプロジェクトのニーズを満たすために Vue.js フレームワークを選択する必要がありました。そして、このプロジェクトが終わりに達(dá)したので、これはこのフレームワークの新規(guī)ユーザーとしてフィードバックを提供する機(jī)會だと自分に言い聞かせました!

それでは、このスキルの向上は Vue.js の悪名に応えたのでしょうか?
現(xiàn)在、フロントエンドを React で開発するよりも Vue で開発する方が良いでしょうか?

それが私たちが見ていくものです!

プロジェクトの立ち上げ

ボイラープレート

プロジェクトを始めようと言う人は、何時(shí)間も、場合によっては數(shù)日もかかる面倒な構(gòu)成を節(jié)約するための、適切な ボイラープレートを探すと言うのです!
それほど詳しく調(diào)べる必要はありませんが、npm create vue@latest コマンドは私のニーズをほぼ満たしています。

? Project name: … myproject-vue
? Add TypeScript? … No / Yes
? Add JSX Support? … No / Yes
? Add Vue Router for Single Page Application development? … No / Yes
? Add Pinia for state management? … No / Yes
? Add Vitest for Unit Testing? … No / Yes
? Add an End-to-End Testing Solution? ? Playwright
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) ? No / Yes

Typescript 言語はすでにサポートされており、ルーティングシステムとストアが提供されており、単體テストやエンドツーエンドテストの余地もあります!

デフォルトでは、Vite バンドラーがインストールされています。どちらが私を不快にさせないでしょうか？実際、ビルドは高速で、ほとんどの場合、ホットモジュール交換 (HMR) が適切に機(jī)能します。

少し npm run dev を?qū)g行して、ローカル開発サーバーを起動します。これで完了です。すでにブラウザで実行されています!

そして本番環(huán)境については? npm run build コマンドを入力するだけで、入力をチェックした後 (Typescript がアクティブ化されている場合)、プロジェクトが dist ディレクトリに靜的ファイルとしてエクスポートされます。

vite v5.2.11 building for production...
? 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
? built in 591ms

プロジェクトのアーキテクチャ

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

プロジェクトのアーキテクチャ面では、特に次のことがわかります:

index.html ファイル (タグ
main.ts、アプリコンポーネント、ルーター、ストアを連続して作成します。

? Project name: … myproject-vue
? Add TypeScript? … No / Yes
? Add JSX Support? … No / Yes
? Add Vue Router for Single Page Application development? … No / Yes
? Add Pinia for state management? … No / Yes
? Add Vitest for Unit Testing? … No / Yes
? Add an End-to-End Testing Solution? ? Playwright
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) ? No / Yes

ルーティングとストアを管理するための純粋な .ts ファイル;
いくつかの構(gòu)成ファイルとテストファイル;
...そしてもちろん *.vue ファイルは、コンポーネント (一般的で再利用可能な要素に相當(dāng)します) と ビュー (高レベルに相當(dāng)します) に區(qū)別されます。ページ)

つまり、ファイルアーキテクチャは非常にシンプルで、ボイラープレートで多くのオプションがチェックされているにもかかわらず、React のアーキテクチャに比較的似ています。
これまでのところ、React から來たものとしては、特に新しいものはありません。そのとき、大きな違いが現(xiàn)れます!

Vue ファイルのアーキテクチャ

これは、公式 Web サイトからインスピレーションを得たコードスニペットです。クリックするとテキストの色が変わり、該當(dāng)する場合は「上のテキストは緑色です」というフレーズが表示されますが、これは *.vue ファイルの典型的なアーキテクチャを表しています。

vite v5.2.11 building for production...
? 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
? built in 591ms

@click によるイベントのバインド、v-if による條件付き表示、および v-bind() による CSS のバインドに注意してください。

コードは 3 つの非常に異なる部分に分かれています:

スクリプト: 制御コード;
テンプレート: HTML 構(gòu)造;
style: CSS スタイルシート。

そしてこれら 3 つの部分は決して混ざりません ?.
これには、クライアントプロジェクトでの経験を通じて私が個(gè)人的に経験したいくつかの利點(diǎn)があります。