Angular 官網(wǎng)

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

安裝腳手架 @angular/cli

用于初始化、開發(fā)、搭建 Angular 應(yīng)用的工具
參考：https://github.com/angular/angular-cli/wiki

cnpm install -g @angular/cli

新建項目

ng new my-admin --type=scss

這里的 --type=scss 是設(shè)置項目以 scss 為預(yù)編譯 css

生成之后的項目目錄

項目目錄

• polyfills.ts
  引入運(yùn)行 Angular 應(yīng)用時所需的一些標(biāo)準(zhǔn) JS

• tsconfig.json
  因為瀏覽器不能直接執(zhí)行 TypeScript，此配置文件是指導(dǎo)編譯器如何生成 JavaScript

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,  // 把ts文件編譯成js時，是否生成對應(yīng)的SourceMap文件
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",  // 編譯目標(biāo)平臺
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

安裝 package.json 的依賴包

cnpm install

依賴包都安裝好之后，就會多出個目錄 node_modules，里面放的就是項目所需的依賴包

一切就緒，運(yùn)行項目

ng serve [--port 4201]

默認(rèn)端口是4200，要修改端口的話，命令就加上 --port xxxx，xxxx是端口號

運(yùn)行

運(yùn)行后的界面

待續(xù)。。。