node
node 官网下载安装(傻瓜式),安装后NPM也同时安装好了
nodejs
注意:不要使用pre版本,使用稳定版
node -v :查看node版本
npm -v :查看nom版本
Angular4^
终端中执行:npm install -g @angular/cli@1.6.6
将全局angular/cli安装为1.6.6版本,保持同步,以免别人的工程导入后因为angular/cli不支持出错。
ng version :查看angular cli 版本
NG-ALAIN脚手架使用
步骤:
1.桌面创建文件夹my-testproject (名字随意)
2.在终端或者vscode终端中cd /Users/ganggang/Desktop/my-testproject ,跳到my-testproject 中
localhost:~ ganggang$ cd /Users/ganggang/Desktop/my-testproject
localhost:my-testproject ganggang$
3.执行npm install @angular/cli 在my-testproject 中安装最新angular/cli
注意: 此时不用 -g ,因为 -g代表全局安装
localhost:my-testproject ganggang$ npm install @angular/cli
安装完成后可以看到my-testproject 下多了node_modules和package-lock.json,代表着此文件夹下的项目使用的ng环境为7.3.8,而此时此文件夹外的全局ng环境还为1.6.6.
4.然后在my-testproject下新建项目my-project(名字随意),执行ng new my-project --style less
localhost:my-testproject ganggang$ ng new my-project --style less
注意:选择y/n时回车代表选择默认选项
创建完成后,my-testproject下就会显示我们新建的工程my-project
5.然后执行cd my-project ,跳转到我们建的项目中
localhost:my-testproject ganggang$ cd my-project
localhost:my-project ganggang$
- 然后执行ng add ng-alain(svn拉取项目到已安装angular的文件夹时只需cd到项目中执行此命令即可在项目中集成cli),添加ng-alain脚手架,中间y/n一直回车选择默认选项即可
7.如果顺利则会安装成功,安装成功后将项目文件夹my-project拖到vscode中,vscode便会显示我们的项目
8.此时vscode终端会自动cd到我们的项目文件夹my-project下,此时执行npm start,即可运行起来脚手架了,按照提示输入登录账号密码即可登录
localhost:my-project ganggang$ npm start
注意事项
如果端口被占用:
终端查看端口: sudo lsof -i :4200
停止占用端口程序:sudo kill -9 2485,2485为占用程序pid
npm audit fix :兼容性更新,扫描项目中的漏洞并自动将任何兼容的更新安装到易受攻击的依赖项
// 推荐几个vscode 插件
ng 语法糖 提示
Angular 8 Snippets
ng语言服务 自动检测 方法属性
Angular Language Service
谷歌调试 之前配置vs调试不成功 应该是没这个插件
Debugger for Chrome
快捷注释格式
Document This
ts代码规范
TSLint
shift + alt + f 格式化命令 记得先在设置中改tab为4个空格