Windows 環境で Angular 開発環境を構成する方法

Node.js

---

インストール

Node.jsは、Node.jsの公式ダウンロードにアクセスし、手順に従ってインストールするだけで簡単にインストールできます。 Node.js的安装比较方便，直接去Node.js官方下载，然后按照步骤安装下去即可

可以将其安装在任何目录，比如

D:\nodejs\

Node.js自带npm，所以不用安装

打开cmd终端，用下列命令检查Node.js安装是否成功：

node -v
npm -v

如果出现版本号，说明Node.js安装成功

配置

配置prefix和cache

使用下列命令可以查看npm的配置

npm config ls

可以看到npm最初将下载的依赖包和缓存都放在C盘下，明显这是不太合适的，不过可以配置这两个目录

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

配置环境变量

右击“计算机”—>“属性”—>“高级系统设置”—>“环境变量”

在系统变量中,设置NODE_PATH，值为

D:\nodejs\node_global\node_modules\

在用户变量中,修改path，添加

D:\nodejs\node_global\

更改npm的镜像源

由于npm的初始源是国外的，所以速度可能会有点慢

这里可以配置淘宝的镜像cnpm，以后把npm的指令改为cnpm即可

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果选了淘宝的cnmp镜像，应该设置一下，保证正常下载工具

ng set --global packageManager = cnpm

Typescript

---

执行如下命令

npm install -g typescript typings

检查版本号

tsc -v

Angular-cli

---

angular-cli它是Angular框架官方的一个构建工具，核心是webpack，以及npm做为依赖包

执行如下命令

npm install -g @angular-cli

检查版本号

ng -v

创建项目

---

可以在nodejs下面创建一个工作空间

md D:\nodejs\workspace

然后进入工作空间

cd D:\nodejs\workspace

新建一个项目

ng new hello-world

然后在hello-world文件夹内启动服务

ng serve

Angular服务默认监听4200

localhost:4200

Node.js などの任意のディレクトリに npm が付属しているため、インストールする必要はありません

cmd を開きますターミナルにアクセスし、次のコマンドを使用して Node.js が正常にインストールされていることを確認します:

ng serve --open

バージョン番号が表示される場合は、Node.js が正常にインストールされていることを意味します🎜 🎜

プレフィックスとキャッシュを設定する

🎜使用 次のコマンドを使用して npm の設定を表示できます🎜rrreee🎜 npm が最初にダウンロードした依存関係パッケージとキャッシュをC ドライブ。明らかにこれは適切ではありませんが、これら 2 つのディレクトリを構成できます🎜rrreee

環境変数を構成する

🎜「コンピューター」を右クリックし、「プロパティ」→「システムの詳細設定」を選択します。 >「環境変数」🎜🎜 システム変数 code> で、<code>NODE_PATH を設定します。値は 🎜rrreee です🎜 ユーザー変数 で、 を変更します>pathに🎜rrreeeを追加します🎜npmのミラーソースを変更します🎜🎜npmの初期ソースは海外のものなので、速度が少し遅いかもしれません🎜🎜タオバオのミラーを設定できますここでは cnpm を使用し、後で npm を使用します。コマンドは cnpm に変更できます🎜rrreee🎜 タオバオの cnmp を選択した場合ミラー、ツールを正常にダウンロードできるように設定する必要があります🎜rrreee🎜Typescript🎜🎜🎜 次のようにコマンド🎜rrreee🎜を実行してバージョン番号を確認します🎜rrreee🎜Angular-cli🎜🎜🎜angular-cli code> Angularフレームワークの公式ビルドツールで、コアは<code>webpack、依存パッケージとしてnpmです🎜🎜以下のコマンドを実行🎜rrreee🎜バージョンを確認してください番号🎜rrreee🎜プロジェクトを作成します🎜🎜🎜nodejsの下にワークスペースを作成できます🎜rrreee🎜その後、ワークスペースに入ります🎜rrreee🎜新しいプロジェクトを作成します🎜rrreee🎜次に、hello-worldでサービスを開始しますフォルダー 🎜rrreee🎜 Angular サービスはデフォルトで 4200 ポートをリッスンします。ブラウザを開いて 🎜rrreee🎜 と入力するか、次のコマンドを入力します。デフォルトのブラウザを直接開きます🎜rrreee🎜 成功したページが表示されたら、すべての設定が成功したことを意味します🎜🎜

以上がWindows 環境で Angular 開発環境を構成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。