Angular2-Step 1

作者: Haozj | 来源:发表于2017-07-27 14:27 被阅读0次
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是端口号

运行

运行后的界面

待续。。。

相关文章

  • Angular2-Step 1

    前提需知:node、npm 包管理器 安装脚手架 @angular/cli 用于初始化、开发、搭建 Angular...

  • 1▪1▪1▪1▪1

    今天是国际劳动节,出门看人头,上路遇堵车,处处挤破头,急哭也停不下车。 不如歇了吧 ...

  • 1+1+1…+1=1

    对“一”的理解: 赠人玫瑰,不仅仅是手留余香。 利益他人,实际上也疗愈了自己。 利他、利己,如此往复循环, 最终利...

  • (-1)×(-1)= 1

    数学家经过很长一段时间才认识到(-1)×(-1)= 1是不能被证明的(即使大数学家欧拉曾给出不能令人信服的...

  • 1-2-1-1-1

    【下马请罪】 子龙下马,向张飞跪地请罪道:“张将军,一时失手……”话未停,便被张飞一矛刺了个透心凉。子龙堵着胸口汩...

  • 1 1:1 1(原创小说)

    闪回:那天她…… 当时,我确实听到了那个声音,可如今却怎么也记不清了。 掉下来了。 我觉得,那一刻...

  • 《1+1=1-1》

    十一月十一日晚,致X小姐。 十月初九, 一个人购物的孤独, 你谈起, 月光下轧过的马路, 金钱带不来满足, 忙忙碌...

  • 1+1=-1

    结婚育子这几年,在磕磕碰碰中一路走来,才恍然大悟,自己真正的成长,始于育儿。 婚前是父母的公主,虽说家境贫困,却得...

  • 1+1<1

    也许有人看到我的标题就会来质疑我,说我怎么连最简单的数学都不会。1+1=2>1啊,这么简单的算数题,我怎会不知?但...

  • 1+1=-1

    看到他人发表文章,我也有点手痒痒了~这是接着上回文章的下半部分,有点长,没人看到就好了︿︿ 这个第二件小事的主题就...

网友评论

    本文标题:Angular2-Step 1

    本文链接:https://www.haomeiwen.com/subject/ohjokxtx.html