只需要這個就可以完成Angular環境的建置！

2 年 ago
宇, 华
2 minutes

首先

本文旨在为初次搭建Angular开发环境的用户提供指南。阅读本文后，您将能够在Mac上成功搭建Angular开发环境！

执行这篇文章的环境

・macOS Catalina 10.15.7 苹果电脑操作系统卡塔利娜版10.15.7
・Homebrew 2.4.12 软件包管理工具Homebrew 2.4.12
・Nodebrew 1.0.1 Node.js版本管理工具Nodebrew 1.0.1
・Node.js 12.13.1 Node.js运行时环境版本12.13.1
・npm package manager 6.14.8 npm包管理器版本6.14.8
・Angular CLI 10.0.6 Angular命令行界面版本10.0.6
・Angular 10.0.6 Angular框架版本10.0.6

路线图

    1. 安装Homebrew

 

    1. 安装Nodebrew

 

    1. 使用Nodebrew安装Node.js

 

    1. 使用npm安装Angular CLI

 

    启动新项目

1. 安装Homebrew

如果您已经安装了Homebrew，请跳过安装步骤。

・Homebrew是什么

Homebrew是广泛在Mac上使用的软件包管理器。它简化了软件的安装并提供了统一管理。这次我们将使用它来安装Nodebrew。
http://brew.sh/index_ja.html

操作步骤

执行Homebrew HP的安装命令。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

※ 以下是截至2020年10月23日的安装命令。

如果尚未安装Xcode的命令行工具，将会自动安装。

brew -v 
Homebrew 2.4.12  #バージョンが表示されれば，ひとまずインストール完了

安装完成后…

如果已经安装

检查Homebrew的状态。

brew doctor 　
Your system is ready to brew.  #このメッセージが出ればbrewは正常な状態です。

如果在brew doctor中出现警告信息，可能是相关的软件包过时或存在某些问题。请根据提示信息解决警告。

将Homebrew保持在最新状态。

brew update  #Homebrew自体のupdate
brew upgrade  #Homebrewに関連するパッケージを含むupdate

2. 安装Nodebrew

Nodebrew是什么？

这是一个用于管理Node.js版本的工具。
当需要对项目中的Node.js版本进行管理时，它非常方便。
这次我们将通过Nodebrew来安装Node.js。
https://github.com/hokaccha/nodebrew

brew install nodebrew
nodebrew -v  #このコマンドでバージョンが表示されればインストール完了

使用Nodebrew来安装Node.js

关于Node.js

运行Angular项目需要用到Node.js。
用简单的话来解释Node.js，它是“使得在服务器端能够使用JavaScript的工具”。利用Node.js可以实现实时通信和可扩展的网络程序。

安装

我们来安装Node.js。
你可以使用以下命令来确认可安装的Node.js版本。

nodebrew ls-remote

请运行以下任意一条命令进行安装。

nodebrew install-binary バージョン番号（例：v15.0.1）  #バージョンを指定する場合

nodebrew install-binary latest　　　　　　　　　　 #最新版を取得する場合

nodebrew install-binary stable                　#安定版を取得する場合

接下来，我们将确认安装的版本。

nodebrew ls

v12.13.1　#インストールされているバージョンがリストアップされる

current: none　#現在採用されているバージョンが表示される。インストール仕立ての場合はnone

激活

请使用以下命令激活安装的Node.js版本中要使用的版本。

nodebrew use v12.13.1

nodebrew ls　　#有効化されたか確認

v12.13.1　
current: v12.13.1　　#v12.13.1が設定された

让通行

使用以下命令将node添加到环境路径中，使其可用（适用于Catalina的zsh版本）。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

重新启动终端并反映更改后，请确认是否可使用node命令。

node -v  #バージョンが表示されればOK！

使用npm安装Angular CLI

Node Package Manager（npm）是什么？

这是一个用于安装和管理Node.js包（预先提供方便功能的集合）的工具。它会在安装Node.js时同时安装。

Angular CLI是什么？

Angular CLI是一个用于自动生成构建Angular项目所需文件的工具。
只需一个命令，即可为您构建Angular项目。

在这个步骤中，我们将使用npm来安装Angular CLI包。

npm install -g @angular/cli　#バージョンを指定したい場合は「cli@バージョン」と記述します。

在旅途中，你将被问到是否允许共享使用情况给Google。如果你同意，请输入”y”并继续前进。

5. 开展新项目

终于，是时候创建 Angular 项目了。
请切换到要创建项目的目录，并执行以下命令！

ng new my-app
? Would you like to add Angular routing? Yes　　#ルーティングファイルを作るか聞かれます
? Which stylesheet format would you like to use? SCSS　　#プロジェクトで使うCSS形式を選択

我们将进入项目目录并启动服务器。

cd my-app
ng serve  #ファイルのコンパイルに少し時間がかかる

当您在浏览器中访问 localhost:4200 并成功显示页面时，一切正常！

总结

辛苦了！Angular的环境已经设置完成了。

bannerAds