M1 ProチップでVueプロジェクトを開始する方法

M1 ProチップでVueプロジェクトを開始する方法

導入

独身の日の買い物中に、m1 pro を搭載した MacBook Pro を購入しました。すべての環境を再度セットアップする必要があります。バックエンド プロジェクトは比較的簡単で、idea をインストールして起動するだけです。フロントエンドの Vue にはあまり詳しくないので、少し調べて環境を構築し、Vue を起動しました。

Homebrewをインストールする

Homebrew は Mac でのソフトウェアのインストールを管理するための優れたツールなので、Mac を入手したらすぐに Homebrew をインストールしました。ネットワーク上の理由によりインストールが失敗する場合があります。以下のコマンドを使用すると、国内のミラーを使用でき、インストールが高速化されます。

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

1 を入力した後、プロンプトに従って手順ごとにインストールします。

nvmをインストールする

Nvm は Node のバージョンを管理するためのツールです。プロジェクトが増えると Node 環境を切り替える必要が常に生じるため、Nvm を使用して Node をインストールすることをお勧めします。以下のコマンドでインストールできます。

brew インストール nvm

インストールが完了したら、環境変数を設定する必要があります。以下のコマンドを使用して .bash_profil 構成ファイルを編集します。

vi ~/.bash_profile

次の構成スクリプトをファイルに記述します。

エクスポート NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # nvmをロードします

書き込んだら設定を有効にするために以下のコマンドを実行します。

ソース ~/.bash_profile

ノードをインストールする

次に、nvm 経由で Node をインストールします。M1 pro チップに適合したノードのバージョンは v15 です。

いいえ、v15

コマンドを実行した後、ノードをコンパイルするのに長い時間がかかります。しばらくお待ちください。約 5 ~ 10 分かかり、その後インストールが成功したことを示すメッセージが表示されます。もう 1 つ注意: エラーを報告する場合は、まず 443、接続タイムアウトなどのネットワークの問題であるかどうかを確認してください。

インストール完了

この時点でgit+homebrew+Node+npmの構築は完了です。次に、npm install および npm run ... コマンドをローカルで実行して、フロントエンドの Vue プロジェクトを起動し、通常どおりにアクセスできます。

npm パッケージのインストールに失敗しました: 国内イメージを変更することで必要な依存関係をインストールできます。以下のコードを正常に実行した後、npm install を実行して依存関係をダウンロードし、プロジェクトを正常に開始できます。テスト済みで効果的です。

npm config レジストリを設定します https://registry.npm.taobao.org
npm 情報 アンダースコア

M1 pro チップで Vue プロジェクトを開始する手順についてはこれで終わりです。M1 pro で Vue を開始する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Apple M1チップにnginxをインストールし、vueプロジェクトをデプロイする詳細な手順
  • M1 MacにPyTorchをインストールする方法
  • M1 Macbook vscode C++ デバッグ デバッグ実装
  • macOS M1 (AppleSilicon) に TensorFlow 環境をインストールする
  • macOS M1 (Apple Silicon) に Conda 環境をインストールして構成する具体的な実装
  • MacBook m1 チップに miniforge を使用して python3.9 をインストールする方法の例
  • Mac M1にHomebrewをインストールする方法

<<:  HTML の隠しフィールドの紹介と例

>>:  MySQL の pid とソケットの詳細な説明

推薦する

JavaScriptページングコンポーネントの使い方の詳細な説明

ページネーションコンポーネントはWeb開発でよく使われるコンポーネントです。ページネーション機能を実...

MySQL の DOS ウィンドウの文字化け問題を解決する方法

文字化けしたコードの問題は次のとおりです。 この問題の原因は非常に単純です。コマンドラインのエンコー...

リモートホスト上でスクリプトや命令を実行する Zabbix の詳細な説明

シナリオ要件1. zabbix_server Web インターフェースのスクリプト機能を使用すると、...

Vueテクノロジーに基づく再帰コンポーネントの実装方法

説明するこの記事では、Vue テクノロジーに基づいて再帰コンポーネントを実装する方法を紹介します。 ...

MySQLクエリ文の実行プロセスの詳細な説明

目次1. クライアントとサーバー間の通信方法2. クエリキャッシュ3. クエリ最適化処理4. クエリ...

Linuxコマンド履歴の調整方法の詳細な説明

Linux システムの bash history コマンドは、以前に実行したコマンドを記憶し、再入力...

ウェブページ(ウェブサイト)のデザインと制作に関する考えや経験の共有

まずは投稿する前に! 「I Want to Study on My Own!」に改めて感謝します。た...

uniapp は日付と時刻の選択機能を実装します

この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...

Web デザイン ヘルプ: Web フォント サイズ データ リファレンス

<br />内容はインターネットから転載したものです。どこから見つけたのか忘れてしまいま...

Vue で debouce の手ぶれ補正機能を使用する方法

目次1. 手ぶれ補正機能2. Vueでdebouceの手ぶれ補正機能を使用する1. 手ぶれ補正機能2...

MySQL 8.0 Windows zip パッケージ版の詳細なインストール手順

MySQL 8.0 Windows zipのインストール手順は次のように紹介されています。準備する:...

フロントエンドはJavaScriptを通じてCADグラフィックスの詳細を作成および変更します。

目次1. 現状2. JSでCADグラフィックを作成および変更する2.1 サポートされているCADエン...

Vueのスロットの詳細な説明

Vue でのコードの再利用により、mixnis が提供されます。テンプレートの再利用により、スロット...

Puppeteer を使用して Linux (CentOS) で Web ページのスクリーンショット機能を実装する

Linux に puppeteer をインストールするときに、次の問題が発生する可能性があります。こ...