記事ディレクトリ
序文
今日の急速に成長するインターネット時代において、フロントエンド開発は大きな注目を集め、需要が高まっている技術的な仕事となっています。フロントエンド エンジニアにとって、適切に構成されたコンピューターを所有することは、作業効率を向上させ、プロジェクトをスムーズに開発するための鍵となります。この記事では、 Vue プロジェクトをスムーズにビルドして実行できるように、新しいコンピューターを最初から構成する方法を説明します。構成プロセス全体を段階的に読者にガイドします。包括安装必要的软件和工具，配置开发环境，以及创建和运行Vue项目。
一、VSCode（Visual Studio Code）
1.1 VSCodeの導入とインストール
- VSCode は、Microsoft によって開発された無料のオープンソース コード エディターです。フロントエンド開発のさまざまなニーズを満たす機能とプラグインの豊富なエコシステムを備えています。VSCode は複数のプログラミング言語をサポートし、コード補完、構文の強調表示、デバッグなどの機能を提供するため、開発者はより効率的にコードを作成およびデバッグできます。さらに、VSCode はカスタム構成やショートカット キー、統合ターミナルや Git などのツールもサポートしています。
方便开发者进行项目管理和团队协作。 - VSCode のインストール
Visual Studio Code は公式 Web サイトからインストール パッケージをダウンロードしました。（安装路径需要自己更改）
1.2 VSCode共通プラグインのインストール
| プラグイン名 | 効果 |
|---|---|
| タグの自動名前変更 | タグの名前を自動的に変更します。HTML または XML タグの開始タグまたは終了タグを変更すると、対応するタグが自動的に更新されます。 |
| 環境 | env ファイル (.env) の形式と構文を強調表示します。 |
| ESLint | JavaScript コードの構文エラーとスタイル エラーをエディターでリアルタイムにチェックして修正するためのプラグイン |
| Git グラフ | Git コミット履歴の視覚的なグラフィカル インターフェイスを提供し、プロジェクトのバージョン管理履歴をよりよく表示して理解できるようにします。 |
| GitLens | コメント、作成者、タイムラインなどの豊富な Git 機能を提供します。 |
| JavaScript (ES6) コード スニペット | JavaScript 開発者が一般的に使用されるコード テンプレートを迅速に生成するためのコード スニペットのセットを提供します。 |
| ライブサーバー | ローカル開発環境にライブ プレビュー サーバーを提供し、ブラウザでのライブ表示とデバッグを実現します。 |
| ダークプロ1台 | 一連の美しいダークテーマを提供する VS Code のテーマプラグイン |
| ブラウザで開く | 現在のファイルをブラウザで開くショートカット ( Alt + B) |
| Prettier - コードフォーマッタ | コードをフォーマットするためのプラグイン。複数のプログラミング言語をサポートし、いくつかのフォーマット オプションと構成を提供します。 |
| vscode-アイコン | 視覚化と使いやすさを強化するために、VS Code のファイル エクスプローラーに素敵なファイル アイコンを追加しました。 |
| 冬 | vue2 プロジェクト、構文の強調表示、コード補完、コードの書式設定、構文チェックに適用可能 |
| Vue 言語機能 (Volar) | vue3 プロジェクト、構文の強調表示、コード補完、コードの書式設定、構文チェックに適用可能 |
2 つの vue プロジェクト用のプラグイン。一方を有効にした場合、競合を避けるためにもう一方を無効にする必要があります
プラグインのインストール方法 ⇒ 拡張機能アイコン（
Ctrl + shift + x）をクリック ⇒ 該当するプラグイン名を検索 ⇒ インストール
1.3 VSCode コードのフォーマット
コードの書式設定の効果は、使用されているプラグイン、言語拡張機能、および書式設定の構成によって影響されます。したがって、独自のニーズに応じて適切なプラグインと構成を選択して、コードのフォーマットを実現できます。
Prettier プラグインをインストールした後、これらの設定を使用して、Ctrl + Sコードを保存するときに自動フォーマットを実現できます。
まずは設定を開きます
両方のボタンにチェックを入れます
shift + Alt + Fオプションの方法でコードをフォーマットすることもできます
2.Node.js
2.1 ノードの導入とインストール
- Node.js は、Chrome V8 エンジンに基づく JavaScript ランタイムです。これにより、開発者は JavaScript を使用して、ブラウザ環境だけでなくサーバー側でもコードを実行できるようになります。Node.js は を提供し
丰富的内置模块和包管理器npm、開発者がアプリケーションを簡単に構築および管理できるようにします。Node.js はフロントエンド開発で広く使用されており构建工具、服务器端渲染、API开发等方面、フロントエンド エンジニアにより多くの技術的な選択肢と柔軟性を提供します。 - ノードのインストール
Node.js 中国の Web サイト、公式 Web サイトに入った後、インストールする長期サポート バージョンを選択します。バージョンが新しすぎて不安定です
。インストールは非常に簡単ですが、自分でインストール パスを選択することを除き、他の手順は次のとおりです。次に、
安装完以后不用配置任何的环境
コンソールでノードとノードを確認します npm のインストールが完了しているかどうか (ノードのインストールには npm のインストールが付属しており、手動インストールは必要ありません)
node -v
npm -v
バージョン番号が表示されればインストール完了です！
2.糸の取り付け
コンソールでコマンドを実行します
npm install --global yarn
インストールが成功したことを確認する
yarn --version
3.ウェブパック
3.1 Webpcakの導入とインストール
- Webpack: Webpack は、
模块打包工具複数のフロントエンド リソース (JavaScript、CSS、画像など) を 1 つ以上の静的ファイルにパッケージ化できるツールです。Webpack は模块化プロジェクト内の各モジュールを メソッドで管理し、設定ファイルに従って処理を進めます打包和优化。さまざまな種類のファイルを処理し、コード分割、圧縮、遅延読み込みなどの機能を実装できる豊富なプラグインとローダーを提供します。Webpack はホット モジュール交換 (HMR) もサポートしており、開発プロセス中に変更の効果をリアルタイムでプレビューできます。Webpack を使用することで、フロントエンド エンジニアはプロジェクト コードをより適切に整理および管理できるようになります。提高开发效率和性能。 - webpck をグローバルにインストールする
npm install webpack -g
四、Vue CLI
4.1 Vue CLIのインストールと導入
- Vue CLI は、Vue.js プロジェクトを迅速に構築するためのツールです
脚手架。、開発サーバー、パッケージ化およびビルド機能を含む、プロジェクト開発ツール チェーンの完全なセットを提供します项目初始化。Vue CLI は Webpack に基づいており、Vue.js 関連のプラグインと構成を統合しているため、フロントエンド エンジニアは Vue プロジェクトを迅速に構築および開発できます。Vue CLI には、プロジェクトの要件に応じてカスタマイズできる豊富なプラグインとテンプレートも提供されています。Vue CLI を使用することで、フロントエンド エンジニアは快速启动项目プロジェクト構造と開発仕様を統一し、Vue.js の開発上の利点を享受できます。 - Vue CLI をグローバルにインストールする
npm install -g @vue/cli
ここで、yarn を使用してスキャフォールディングをインストールする場合は、環境を自分で設定する必要があることに注意して
ください。環境設定を使用してvue -V、インストールが成功したかどうかを確認し
、@vue/cli スキャフォールディングをグローバルにインストールできます。
5. Vue プロジェクトを初期化して実行します。
新しいフォルダーを作成し、コンソールに入力します
vue create vue2_test
vue2 または vue3 のデフォルトのテンプレート インストールを選択します (Enter キー)
インストール後、実行します
cd vue2_test
npm run serve
就成功跑起一个vue2的初始化项目了
打开网址：
6. フロントエンドエンジニアにとって必須のソフトウェア
6.1 Git
- バージョン管理: Git は、コードのバージョンと変更履歴を管理するために使用される分散バージョン管理システムです。開発チームの共同作業、コード変更の追跡、ブランチのマージなどに役立ちます。
- ブランチ管理: Git を使用すると、複数のブランチの作成と管理が可能になり、並行開発と機能の分離が容易になります。
- チーム コラボレーション: Git はチーム コラボレーションの機能を提供し、開発者は Git を使用して共有、マージ、競合を解決できます。
- バージョンのロールバック: Git では、必要に応じて特定のコード バージョンに戻ることができ、コードのロールバックや回復に便利です。
Git 公式 Web サイトのダウンロード アドレス
インストールが完了したら、ssh 公開キーを設定する必要があります将ssh文件夹中的公钥（ id_rsa.pub）添加到GitHub管理平台中
6.2 狙撃
- スクリーンショット: スニペーストは、画面上の任意の領域をすばやくキャプチャし、マーク、編集、保存できる強力なスクリーンショット ツールです。
- ペーストボード管理: Snipaste は、クリップボード内の履歴コンテンツを簡単に管理し、すばやく貼り付けおよびコピーできるペーストボード管理機能を提供します。
スニペーストのダウンロード アドレス
6.3 ピクセルクック
- デザイン ドラフト アノテーション: Pxcook は、デザイナーのデザイン ドラフトを、サイズ、色、フォントなどのフロントエンド開発に必要なアノテーション情報に変換するために使用されるデザイン ドラフト アノテーション ツールです。
- リソースのエクスポート: Pxcook は、デザインドラフト内の画像やアイコンなどを、フロントエンド開発に必要なリソース ファイルとしてエクスポートできるため、開発者にとって便利です。
Pxcookのダウンロードアドレス
7.VUE開発者ツール
Vue Devtools (Vue Devtools) は、Vue.js アプリケーション開発を支援するためのブラウザー プラグインです。调试和分析その主な役割は、開発者がブラウザで Vue.js アプリケーションを実装できるように支援し、次のような一連の強力な開発ツールと機能を提供することです。
-
コンポーネント階層ビュー: Vue Devtools では、現在のページに Vue コンポーネント階層を表示できます。これは、開発者がコンポーネントのネスト関係と階層をすばやく理解するのに便利です。
-
コンポーネントの状態の表示と変更: 開発者は、プロパティ、データ、計算済みなどを含む各コンポーネントの状態データを表示し、テストやデバッグのためにこれらのデータをリアルタイムで変更できます。
-
イベントの追跡とデバッグ: Vue Devtools は、バインドされたイベントや起動されたイベントを含むコンポーネント イベント リスナーを表示できます。開発者はイベントのトリガーと処理を追跡して、問題のデバッグと分析を容易にすることができます。
-
パフォーマンスの監視と分析: Vue Devtools は、コンポーネントのレンダリング パフォーマンスやメモリ使用量などの指標を表示して、開発者がアプリケーションのパフォーマンスを最適化できるようにするパフォーマンスの監視と分析ツールを提供します。
-
Vuex 状態管理ツール: Vue Devtools は、アプリケーションの状態ツリーを表示および変更できる Vuex の状態管理ツールを統合します。これは、Vuex 関連機能のデバッグとテストに便利です。
-
タイム トラベル デバッグ: Vue Devtools はタイム トラベル デバッグをサポートしています。これにより、さまざまな時点でのコンポーネントの状態とデータの変更を遡って表示でき、複雑なデータ フローと状態管理のデバッグに便利です。
つまり、Vue Devtools は非常に実用的な開発ツールであり、Vue.js アプリケーションの開発効率とデバッグ能力を大幅に向上させ、開発者が Vue コンポーネント、状態、イベントをよりよく理解してデバッグできるようにします。
要約する
この記事のガイダンスを通じて、新しいコンピューターを最初から構成し、Vue プロジェクトを正常にビルドして実行する方法を学びました。まず、必要なソフトウェアとツールをインストールします。次に、Vue CLI を使用して新しい Vue プロジェクトを作成し、開発サーバーを起動します。最後に、個人の好みに応じてエディターとプラグインを構成して、開発効率を向上させます。この記事が、新しいコンピューターをスムーズに構成し、快適な Vue プロジェクト開発を開始するのに役立つことを願っています。