angular从0到1:环境安装及运行
原文链接:这里
0.前言
公司开发需要用到angular,正好把学习过程记录下来。
本文用到的工具vscode+nodejs(V12.18)
1.基础环境搭建
安装angular需要nodejs环境(检验版本是10以上的),然后使用npm安装cnpm。指令如下:
npm install -g cnpm --registry=https://registry.npm.taobao.org
或建议顺便安装一下yarn
npm install -g yarn --registry=https://registry.npm.taobao.org huo
然后使用cnpm安装angular/cli脚手架,命令如下:
npm install -g @angular/cli
或
cnpm install -g @angular/cli
输入ng v查看版本,出现如下界面表示正常

2.创建项目
angular创建项目格式为
ng new 项目名称
例如
ng new myapp
输入之后会有几个提示
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace? This setting helps improve maintainability and catch bugs ahead of time.
For more information, see https://angular.io/strict (y/N)
意为是否要使用更严格的数据类型检查,输入y即可
? Would you like to add Angular routing? (y/N)
意为是否增加路由,输入Y即可
Which stylesheet format would you like to use? (Use arrow keys)
> CSS
SCSS [ https://sass-lang.com/documentation/syntax#scss ]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org ]
Stylus [ https://stylus-lang.com ]
你要用哪种CSS样式,随便选一个用的熟练的就行。
当然,很多人这个过程会报错,没有关系,我们cd myapp到项目目录内部,然后执行
cnpm install
或
yarn (需要提前安装yarn)

这个时候项目就会正常了。然后执行
ng serve --open
出现如下界面表示基础项目搭建成功了。

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析