angular快速开发之脚手架搭建

angular快速开发之脚手架搭建

1.  检查电脑是否安装在cmd中输入

(请先在终端/控制台窗口中运行命令 node-v 和 npm-v, 来验证一下你正在运行node 8.x 和npm 5.x 以上的版本。 更老的版本可能会出现错误,更新的版本则没问题。)


node版本号      node –v
npm版本号       npm -v


image.png



 


2.  若未正常输出版本号


安装node.js: https://nodejs.org/en/

安装npm:

使用淘宝镜像      npm config setregistry https://registry.npm.taobao.org


3.  安装angular-cli


angular2后就有了angular-cli

全局安装最新版本angular-cli          

npm install @angular/cli -g

               

检测是否成功   

       

 ng version

image.png


如若出现如图angular标志,证明成功,如果安装失败,

可能是网的问题,可以重新安装,重新安装时需要删除原有的cli,在进行安装

删除cli                                            

npm uninstall -g angular-cli


使用cnmp安装时删除cli                 


 cnpm uninstall –g angular-cli

 


4.  运用命令生成新项目和默认代码


下面就可以新建项目的了(比较大,慢)             ng new 文件名


image.png



(不需要手动npm install ,会自动下载相应的包)

进入项目      cd 文件名


启动项目(默认端口号localhost:4200)           

    

npm start或者ng server

image.png




5.  打开浏览器出现查看,出现以下证明,成功(红框是你的项目文件夹名称)

image.png



6.  打开编辑器查看项目,生成的目录解释


angular-2.png



7.  构建命令

项目打包         


npm run build或者ng build




追梦猪网站致力于前端分享申明:本站内容搜集整理而来请勿商业用途,仅供交流所用,如若侵犯您的权益请邮件站长进行删除!

文明浏览请勿传播非法内容