详解angular2.x创建项目入门指令


Posted in Javascript onOctober 11, 2018

很久没写过angular2.x ,最近一次也是几个月之前,为了下次查阅方便,相关命令记录下

1.ng --version 检查下自己angular cli版本

顺便看看npm -v node -v

E:\phpStudy\PHPTutorial\WWW>ng --version

  _           _         ____ _   ___
  / \  _ __  __ _ _  _| | __ _ _ __   / ___| |  |_ _|
 / △ \ | '_ \ / _` | | | | |/ _` | '__|  | |  | |  | |
 / ___ \| | | | (_| | |_| | | (_| | |   | |___| |___ | |
/_/  \_\_| |_|\__, |\__,_|_|\__,_|_|    \____|_____|___|
        |___/
  
Angular CLI: 1.7.3
Node: 8.9.3
OS: win32 x64
Angular:
E:\phpStudy\PHPTutorial\WWW>npm -v
5.5.1

E:\phpStudy\PHPTutorial\WWW>node -v
v8.9.3

2.ng new blog-web 创建一个项目

ng new blog-web --skip-install 这里只跳过安装 如果没有跳过没关系,目录安装完下载很慢可以直接终止,再用cnpm安装

E:\phpStudy\PHPTutorial\WWW>ng new blog-web --skip-install
 create blog-web/e2e/app.e2e-spec.ts (290 bytes)
 create blog-web/e2e/app.po.ts (208 bytes)
 create blog-web/e2e/tsconfig.e2e.json (235 bytes)
 create blog-web/karma.conf.js (923 bytes)
 create blog-web/package.json (1293 bytes)
 create blog-web/protractor.conf.js (722 bytes)
 create blog-web/README.md (1023 bytes)
 create blog-web/tsconfig.json (363 bytes)
 create blog-web/tslint.json (3012 bytes)
 create blog-web/.angular-cli.json (1243 bytes)
 create blog-web/.editorconfig (245 bytes)
 create blog-web/.gitignore (544 bytes)
 create blog-web/src/assets/.gitkeep (0 bytes)
 create blog-web/src/environments/environment.prod.ts (51 bytes)
 create blog-web/src/environments/environment.ts (387 bytes)
 create blog-web/src/favicon.ico (5430 bytes)
 create blog-web/src/index.html (294 bytes)
 create blog-web/src/main.ts (370 bytes)
 create blog-web/src/polyfills.ts (3114 bytes)
 create blog-web/src/styles.css (80 bytes)
 create blog-web/src/test.ts (642 bytes)
 create blog-web/src/tsconfig.app.json (211 bytes)
 create blog-web/src/tsconfig.spec.json (283 bytes)
 create blog-web/src/typings.d.ts (104 bytes)
 create blog-web/src/app/app.module.ts (316 bytes)
 create blog-web/src/app/app.component.html (1141 bytes)
 create blog-web/src/app/app.component.spec.ts (986 bytes)
 create blog-web/src/app/app.component.ts (207 bytes)
 create blog-web/src/app/app.component.css (0 bytes)
Project 'blog-web' successfully created.

3.cnpm install

这里用淘宝镜像源,所以上一步只新建目录相关文件,国内cnpm会快很多,不过后期ng build时候需要注意点

切换进项目目录

E:\phpStudy\PHPTutorial\WWW>cd blog-web

cnpm install

E:\phpStudy\PHPTutorial\WWW\blog-web>cnpm install

详解angular2.x创建项目入门指令

4.ng serve 运行

这里的 -open就是自动打开网页了 默认的端口是4200如果端口被占用 可以使用 ng serve --port 4201

E:\phpStudy\PHPTutorial\WWW\blog-web>ng serve -open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 11% building modules 10/10 modules 0 activewebpack: wait until bundle finished: /
Date: 2018-10-11T05:15:14.052Z
Hash: fc83a109759056196c47
Time: 8328ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 18.3 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 575 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 42.5 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.45 MB [initial] [rendered]

webpack: Compiled successfully.

最后页面如下

详解angular2.x创建项目入门指令

这里面很多指令没写,只是当做自己再来操作一次,下一篇转载一份ng指令列表 很全

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
jquery实现心算练习代码
Dec 06 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
axios学习教程全攻略
Mar 26 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 Javascript
详解vscode中vue代码颜色插件
Oct 11 #Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 #Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 #Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 #Javascript
vue最简单的前后端交互示例详解
Oct 11 #Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 #Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 #Javascript
You might like
人大复印资料处理程序_查询篇
2006/10/09 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
微信小程序实现图片压缩
2019/12/03 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python底层封装实现方法详解
2020/01/22 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
linux面试题参考答案(6)
2014/08/29 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
操行评语大全
2014/04/30 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
公证书
2019/04/17 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle