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是端口號

運行

運行后的界面

待續。。。