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 とソケットの詳細な説明

推薦する

nginxリバースプロキシのyum設定の詳細な手順

パート0 背景社内のイントラネットサーバーは直接インターネットにアクセスすることはできませんが、外部...

MySQL の条件文で 1 つの情報しか読み取れない問題に対する 2 つの解決策

今日、私の同僚が MYSQL クエリ ステートメントの作成時に非常に奇妙な問題に遭遇しました。MyS...

iframe を使用して Web ページに他の Web ページを埋め込む方法

iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...

grpc のリバース プロキシとして nginx を使用する場合の落とし穴の概要

背景ご存知のとおり、nginx は高性能な Web サーバーであり、負荷分散やリバース プロキシによ...

MySQL でデータベースを作成した後、ユーザー 'root'@'%' によるデータベース 'xxx' へのアクセスが拒否される問題を解決する

序文最近、仕事で問題が発生しました。データベースを作成した後、データベースに接続するときにエラーが発...

Vue でのキープアライブコンポーネントの使用例

問題の説明(キープアライブとは何か)キープアライブ 名前の通り、アクティブな状態を維持します。誰が活...

オンラインMySQL自動増分IDが使い果たされた場合の対処方法

目次テーブル定義の自動増分 ID InnoDBシステムはrow_idを自動的に増加させるシドInno...

モバイル端末の水平および垂直画面ビューポート検出を決定するための js のいくつかの方法

目次1. 異なるビューポートを取得する方法2. 水平画面と垂直画面のJavaScript検出3. 水...

HTML の blockquote タグの使用と美化

ブロック引用の定義と使用法<blockquote> タグは引用ブロックを定義します。 &...

Vueのウォッチリスナーの使い方を説明する記事

目次リスナーウォッチ形式リスナーを設定します。要約するリスナーウォッチ関数名は、リッスンする要素の名...

セマンティックタグを使用して、IE6、7、8と互換性のあるHTMLを記述します。

HTML5 では、ヘッダー、フッター、ナビゲーションなどのセマンティック タグが追加されているため...

アダプティブ Web デザインを実現する方法に関する関連知識ポイントの要約

「アダプティブ Web デザイン」はどのように機能しますか?実はそれほど難しいことではありません。 ...

Nginx を使用してグレースケール リリースを実装する

グレースケールリリースとは、白と黒をスムーズに移行できるリリース方法を指します。 ABテストとは、グ...

よく使われるCSSスタイル(レイアウト)の詳しい説明

新しいCSS3プロパティと互換性ありCSS3では、プラグインprefixfree.min.jsを使用...