Windows 환경에서 Angular 개발 환경을 구성하는 방법

一个新手
풀어 주다: 2017-09-07 10:18:01
원래의
1447명이 탐색했습니다.


Node.js


Installation

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 드라이브에 배치한 것을 볼 수 있습니다. 분명히 이는 적절하지 않지만 다음 두 디렉터리를 구성할 수 있습니다🎜rrreee

환경 변수 구성

🎜"컴퓨터" ->"속성" ->"고급 시스템 설정" -> "환경 변수"🎜🎜시스템 변수 code>에서 <code>NODE_PATH를 설정하면 값은 🎜rrreee🎜사용자 변수에서 path를 수정합니다. , 추가 🎜rrreee🎜npm 미러 소스 변경 🎜🎜npm의 초기 소스가 해외이므로 속도가 약간 느릴 수 있습니다🎜🎜타오바오 미러 cnpm 여기에서, 나중에 npm사용 >명령어는 cnpm🎜rrreee🎜으로 변경될 수 있습니다. Taobao의 cnmp 미러를 선택하는 경우, 도구가 정상적으로 다운로드되도록 설정해야 합니다.🎜rrreee🎜Typescript🎜🎜🎜다음과 같이 실행하세요. 🎜rrreee🎜 명령으로 버전 번호를 확인하세요. 🎜rrreee🎜Angular-cli🎜🎜🎜angular-cli Angular 프레임워크의 공식 빌드 도구이며 핵심은 webpack이고 npm은 종속 패키지입니다🎜🎜다음 명령을 실행하세요🎜rrreee🎜버전 번호를 확인하세요🎜 rrreee🎜프로젝트 만들기🎜🎜🎜nodejs 아래에 작업 공간을 만들 수 있습니다🎜rrreee🎜그런 다음 작업 공간에 들어가세요🎜rrreee🎜새 프로젝트 만들기 🎜rrreee🎜그런 다음 hello-world 폴더에서 서비스를 시작하세요 🎜 rrreee🎜Angular 서비스는 기본적으로 4200 포트를 수신하고, 브라우저를 열고 🎜rrreee🎜를 입력하거나 다음 명령을 입력합니다. 기본 브라우저를 직접 엽니다🎜rrreee🎜성공적인 페이지가 나타나면 모든 구성이 성공적으로 완료되었습니다🎜🎜

위 내용은 Windows 환경에서 Angular 개발 환경을 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!