美文网首页
angular cli安装

angular cli安装

作者: 漫漫江雪 | 来源:发表于2017-03-08 22:28 被阅读0次

1、node.js官网下载安装最新的nodejs
https://nodejs.org/en/

2、安装angular-cli (视网络环境,安装的时间比较长)
https://github.com/angular/angular-cli
npm install -g @angular/cli
翻墙后安装多次(并且命令提示符以管理员身份运行安装都失败)
只好用cnpm来安装了 https://npm.taobao.org/
打开cmd(以管理员身份运行),将npm映射成淘宝的服务器

npm install -g cnpm --registry=[https://registry.npm.taobao.org](https://registry.npm.taobao.org/)   
安装之前先安装一下typescript
cnpm install -g typescript
cnpm install -g @angular/cli
图片.png

cli的使用 ng help
ng --version查看安装版本

Paste_Image.png

使用ng new angular2start 创建项目

Paste_Image.png

cd angular2start
上面new一个项目的过程中会npm安装包,此时又要翻墙,
所以可以ctrl+c停止,再通过cnpm命令来安装

当然也可以用命令来跳过 npm对包的安装

ng new ngApp --skip-install
//简写
ng new ngApp -si
还可以指定样式形式
ng new ngApp -si --style=scss
Paste_Image.png
最后 ng serve 来启动项目 ng serve --open (加上--open是自动打开浏览器)
可以看到浏览器自动打开了 http://localhost:4200
(备注:ng serve --prod --aot 命令可以启用预编译,使生成的文件体积更小)

使用ng命令创建组件Components,指令Directives、管道Pipes、服务Services

ng generate component my-new-component
ng g component my-new-component # using the alias
 
# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp
ng后面的g=generate创建的意思
scaffold       usage
Component     ng g component my-new-component
Directive     ng g directive my-new-directive
Pipe           ng g pipe my-new-pipe
Service     ng g service my-new-service
Class         ng g class my-new-class
Interface     ng g interface my-new-interface
Enum          ng g enum my-new-enum
Module       ng g module my-module

项目也可以用cnpm安装其它的包,如jQuery、bootstrap等

cnpm install jquery --save-dev
cnpm install @types/jquery --save-dev

cnpm install bootstrap --save-dev
cnpm install @types/bootstrap --save-dev

一直碰到一个问题就是引用node_modules中的css样式
例如想使用bootstrap的css样式,一般的做法是在.angular-cli.json中引入
像这样

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

不知道为啥我这样不起作用,不知道是哪里的问题(有人说是cnpm安装的问题...)
只好在styles.css中作一次@import引入

@import "~bootstrap/dist/css/bootstrap.css";

打开vsc编辑器,开启ng2开发学习之旅!!!!
vsc格式化代码的快捷键 alt+shift+f

相关文章

  • 2019-07-06 Angular 4

    安装angular cli 新建项目 1.安装angular cli $npminstall-g@angular/...

  • angular-day1

    npm install -g @angular/cli //安装angular Cli ng new progr...

  • 环境搭建

    安装node 安装npm 安装angular/clinpm install -g @angular/cli 创建新...

  • angular7快速上手

    项目初始化 安装 Angular CLI (可选) 检测 Angular CLI 是否安装成功 创建新的项目 启动...

  • [学习笔记] Angular(学着玩)

    使用脚手架 Angular CLI 搭建一个 Angular 项目 step1: 安装 Angular CLI 使...

  • 常用命令

    安装angular cli npm install -g @angular/cli 创建工作空间和初始应用...

  • Angular入门

    一.项目初始化 安装Angular CLI:命令:npm install -g @angular/cli作用:创建...

  • Angular封装组件并上传至npm

    一.制作组件 1.安装angular CLI npm install -g angular-cli@latest ...

  • angular学习笔记

    一、搭建Angular开发环境 安装nodejs, Angular Cli, WebStorm 先安装nodejs...

  • npm在安装包时报错

    今天下午想看angular,因为之前是angular-cli方式安装的,想改成@angular/cli,所以把以前...

网友评论

      本文标题:angular cli安装

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