Angular2-Step 1

Angular 官网

前提需知：node、npm 包管理器

安装脚手架 @angular/cli

用于初始化、开发、搭建 Angular 应用的工具
参考：https://github.com/angular/angular-cli/wiki

cnpm install -g @angular/cli

新建项目

ng new my-admin --type=scss

这里的 --type=scss 是设置项目以 scss 为预编译 css

生成之后的项目目录

项目目录

• polyfills.ts
  引入运行 Angular 应用时所需的一些标准 JS

• tsconfig.json
  因为浏览器不能直接执行 TypeScript，此配置文件是指导编译器如何生成 JavaScript

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,  // 把ts文件编译成js时，是否生成对应的SourceMap文件
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",  // 编译目标平台
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

安装 package.json 的依赖包

cnpm install

依赖包都安装好之后，就会多出个目录 node_modules，里面放的就是项目所需的依赖包

一切就绪，运行项目

ng serve [--port 4201]

默认端口是4200，要修改端口的话，命令就加上 --port xxxx，xxxx是端口号

运行

运行后的界面

待续。。。