1. 安裝nodejs和淘寶鏡像cnpm

下載安裝nodejs，下載后雙擊按步驟安裝即可。安裝之后通過node命令node -v來查看是否安裝成功。

npm：nodejs已經集成了npm，node安裝會默認裝好npm?？赏ㄟ^npm -v命令來查看是否安裝成功。

備注：npm 是 Node Package Manager 的簡稱，顧名思義，它是 node 的包管理工具，也是目前世界上最大的開源庫生態(tài)系統(tǒng)。相比 npm，yarn 相信大家也不會陌生，它是由 facebook 推出并開源的包管理工具，具有速度快，安全性高，可靠性強等主要優(yōu)勢，參考yarn的安裝和使用
。

cnpm：因為node的npm安裝插件比較慢，國內建議使用淘寶鏡像cnpm工具。即先使用npm安裝cnpm工具：npm i -g cnpm --registry=https://registry.npm.taobao.org，然后使用cnpm來安裝其他插件。可通過cnpm -v命令來查看是否安裝成功。

2. TypeScript的安裝（可選）

typescript是ng應用開發(fā)中使用的主語言，所以也需要安裝ts。打開cmd，輸入命令行cnpm install –g typescript即可完成安裝，通過tsc -v命令來驗證是否安裝成功。

3. 安裝腳手架工具Angular-CLI

Angular CLI是一個命令行界面工具，它可以創(chuàng)建項目、添加文件以及執(zhí)行一大堆開發(fā)任務，比如測試、打包和發(fā)布。
Cli是Command Line Interface的簡寫，是一種命令行接口，實現(xiàn)自動化開發(fā)流程。它是ng執(zhí)行開發(fā)、測試、打包和發(fā)布必備的集成化平臺，俗稱腳手架。通過cnpm install -g @angular/cli命令進行全局安裝，然后通過ng version命令來查看是否安裝成功。

腳手架安裝成功.png

拓展： ng相關命令

ng相關命令.png

4. 使用腳手架工具創(chuàng)建項目（初始化項目架構）

使用ng new myProject命令來新建項目，新生成的項目目錄結構如下：

項目目錄.png

拓展：常用的新建指令
　　ng g class classname // 新建 class
　　ng g component componentname // 新建組件
　　ng g directive directivename // 新建指令
　　ng g enum enumname // 新建枚舉
　　ng g module modulename // 新建模塊
　　ng g pipe pipename // 新建管道
　　ng g service servicename // 新建服務

5. 啟動項目并打包部署

IDE：可使用vscode、webstorm和sublime等開發(fā)工具來開發(fā)，推薦使用VSCode，安裝完成直接打開即可。

VSCode可直接打開終端進行后續(xù)操作，即打開項目根目錄進入操作終端：

VSCode操作終端.png

(1) 安裝項目所需的依賴包：若不是新建的項目（如從網(wǎng)絡下載項目源碼），直接運行項目可能因為缺少依賴包而報錯，需在終端鍵入cnpm install來安裝項目所需的依賴包。

在VSCode終端安裝依賴包.png

補充—安裝依賴包完成.png

備注：推薦使用cnpm，避免npm會因網(wǎng)速等因素導致包下載中斷的問題。下載完成會在根目錄下生成node_modules文件夾，為項目運行所需的依賴包。
注意：若先打開的VSCode，后下載安裝nodejs和cnpm，將導致ncpm命令無法識別，重啟VSCode即可解決。

相關報錯問題請參考npm/cnpm/ng命令運行報錯與解決匯總來解決。

(2) 啟動項目：終端鍵入ng serve，編譯成功后啟動一個內部服務器。

項目編譯成功.png

啟動項目.png

相關報錯問題請參考npm/cnpm/ng命令運行報錯與解決匯總來解決。

(3) 打包：終端鍵入ng build --prod --aot執(zhí)行打包命令。

打包.png

• 在nginx官網(wǎng)中下載nginx
• 把上一步dist文件夾下的打包文件替換線上服務器前端目錄拷貝到nginx/html下并重命名為myProject
• 修改conf/nginx.conf文件中的root路徑

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

修改為location 的root ：

location / {
root html/myProject;
index index.html index.htm;
}

點擊nginx.exe啟動nginx，在瀏覽器中輸入localhost:80即可看到項目。

備注：此時我們只需把nginx打包發(fā)給同事，然后告訴他點擊nginx.exe后在瀏覽器中輸入localhost:80即可。

備注：Vue項目創(chuàng)建(使用Vue腳手架工具)、啟動并打包部署 類似 Angular項目創(chuàng)建(使用Angular腳手架工具)、啟動到打包部署，可對比學習。