美文网首页
Angular环境搭建以及AngularCli常用命令使用

Angular环境搭建以及AngularCli常用命令使用

作者: 霸道的黑猫 | 来源:发表于2019-07-05 14:16 被阅读0次

    安装Nodejs

    首先要安装nodejs,如果你的电脑已经装过了,最好确认是比较新的版本,否则可能会出问题。
    没有安装的直接去nodejs官网找到对应系统下载nodejs安装。安装过程很简单,官网有教程。
    安装完成后,打开控制台
    输入node -v 和npm -v看看安装版本

    查看node和npm版本
    npm是nodejs自带的包管理工具,npm默认使用海外的服务器如许切换服务器为淘宝镜像的话在控制台输入下面的命令
    npm config set registry http://registry.npm.taobao.org/
    

    当然你也可以使用cnpm那么则需要安装cnpm:

    npm install -g cnpm
    

    如遇权限问题则加sudo

    sudo npm install -g cnpm
    

    以上都成功了则代表你离angular近了一大步了,接下来就可以进入正题了(话说我早都等不及了😁)

    安装AngularCli

    AngularCli其实就是一个npm服务器上的一个包,当然使用Google提供的,我们只需要下载安装就可以了
    安装命令:

    npm install -g @angular/cli
    

    如遇权限问题请仿照👆npm的权限问题解决方案
    安装之后可以输入下面命令来查看是否安装成功

    ng --version
    

    如正确输出如下内容则表示安装成功


    image.png

    使用AngularCli生成Angular项目

    在你的电脑上选择一个项目目录,在此目录进入控制台输入命令:

    ng new my-app
    

    接下来选择一些需要的功能,不知道是什么可以直接选择回车(回车默认y)

    ? Would you like to add Angular routing? (y/N)  //是否需要路由 直接回车
    
    ? Which stylesheet format would you like to use? (Use arrow keys)
    ❯ CSS 
      SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
      Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
      Less   [ http://lesscss.org                                                 ] 
      Stylus [ http://stylus-lang.com
    //选择渲染样式所需要的技术,这里我们使用css
    

    稍等三五分钟去喝杯水...
    好的此时AngularCli已经帮我们生成了一个名为my-app的项目出来,在控制台进入目录中执行启动命令

    cd my-app&&ng serve --open
    

    稍等一分钟继续去喝水
    好的,此时项目已经运行起来了,此时应该已经在你的Chrome浏览器(身为一个前端程序猿怎么能没有Chrome浏览器呢)中打开了,当然如果没有打开的话,你可以去控制台查看输出,输出中应该会有访问地址,没有就加我好友(当然只限妹子😁)

    此时你可以选择一个开发工具打开生成的项目,尝试这修改src中的app.component.html、app.component.ts、app.component.css来查看变化,下面会说一下生成的各个目录的内容。

    相关文章

      网友评论

          本文标题:Angular环境搭建以及AngularCli常用命令使用

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