WebStorm开发angularcli项目环境配置

原文出处:https://blog.csdn.net/aliceliu21/article/details/75503775

网上有很多关于配置angular cli 项目开发环境配置的文章,但是我都未配置成功。经过我的实验,记录下我配置成功的步骤。


安装环境

  • windows 7
  • WebStorm 2017.2
  • Node 8.1.4
  • python 2.7.13
  • angular cli 1.2.1

  1. 安装node,选择的是8.1.4版本,下载地址为https://nodejs.org/dist/v8.1.4/node-v8.1.4-x64.msi
  2. 安装python,在安装angularcli之前需要安装这个,选择的python的版本是2.7.13,下载地址为https://www.python.org/ftp/python/2.7.13/python-2.7.13.msi
  3. 设置python环境变量。右键点击我的电脑-》属性-》点击左侧的高级系统设置-》“高级”标签下的“环境变量”按钮-》编辑系统变量内的path-》添加python的安装路径与Script路径-》一路确定 
    我的python路径为“ E:\dev\Python27\Scripts;E:\dev\Python27;”,直接追加到变量值的后面。 
    WebStorm开发angularcli项目环境配置_第1张图片

    设置完成后查看python环境变量有没有设置成功。打开控制台,输入python。 
    出现python的版本号,即为设置成功。 
    WebStorm开发angularcli项目环境配置_第2张图片

  4. 进入node的安装路径,使用npm命令安装angularcli。 
    angular是用typescript编写的,所以先安装typescript。但是无力,所以找了taobao的镜像。 
    在控制台下输入

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

    使用淘宝的镜像安装typescript,需要在npm命令前加c,即用cnpm命令安装

    cnpm install -g typescript
    • 1

    安装angular cli

    cnpm install -g @angular/cli
    • 1
  5. 安装WebStorm

  6. 打开WebStorm,选择创建Angular Cli项目。 
    若前面几步都正确安装,WebStorm会自动查找node和Angular cli。 
    WebStorm开发angularcli项目环境配置_第3张图片 
    点击create,angualr创建成功。

你可能感兴趣的:(开发工具)