Angular6.0-Cli構建和Vue-cli構建項目

angular6.0版本是google在angularjs上進行一次大的升級，提升了性能 更改了API方面的知識。

建立項目第一步

安裝 node.js（自行百度安裝），附上nodejs的中文網地址Node,安裝npm的包管理器.

第二步

安裝好nodejs後 安裝 Angular CLI 使用npm命令安裝,打開控制檯進行安裝，-g表示全局 global的意思。

npm install -g @angular/cli//安裝腳手架工具，用於快速建立項目
複製代碼

第三步

建立工做空間和初始應用 ng 表示angular的命令，my-app表示項目名稱,可自行更改.

ng new my-app//建立一個名爲my-app的項目
複製代碼

第四步

啓動開發服務器

cd my-app//進入到項目目錄
  ng serve --open//打開項目而且運行本端
  ng build //編譯,也必須進入到main.js目錄或者main.ts目錄
複製代碼

完成angular項目的建立。中文官方地址Angular6.0,裏面有更詳細的步驟

新增建立組件和服務

angular6.0是一個組件化的開發，每一個模塊均可以劃分爲單個小型的組件進行提供，經過DI的方式進行組件和服務之間的調用.

ng g c 組件名//建立組件 全寫：ng generate component your_name.
  ng g s 服務名//建立服務 全寫: ng generate service your_service_name.
複製代碼

默認狀況下，Angular CLI 命令 ng generate component 在生成組件時會帶有模板文件，你能夠經過參數來覆蓋它：

ng generate component 組件名稱 -it
複製代碼

爲數據建立一個類和接口

爲數據建立一個類class和接口interface

ng g class 類名
ng g interface 接口名稱
複製代碼

升級當前項目的腳手架版本

npm install --save-dev @angular/cli@latest
複製代碼

備註

啓動一個原有的angular項目,執行如下的命令，若是端口被佔用，能夠更改端口進行啓動，或者關閉佔用的端口,有時候ng指令無效 從新安裝一下腳手架 全局安裝便可使用指令。

npm start // 打開瀏覽器輸入地址 http://localhost:4200/
    ng serve --port 4201//用於修改端口.簡寫:ng serve --p 端口號
複製代碼

Vue構建項目

首先第一步安裝腳手架工具Vue-cli

固然前提條件也是基於node的npm包，也能夠用yarn，建議用npm安裝。安裝成功後,能夠用 vue --version或者vue --v進行版本檢查是否正確。

npm install -g @vue/cli//成功安裝後，驗證
 vue --version //或者  vue --v
複製代碼

第二步

安裝原型擴展，進行vue文件的快速開發

npm install -g @vue/cli-service-global
複製代碼

僞第三步，啓動命令

用於啓動vue服務和vue的項目

vue serve  組件名//啓動一個.vue的文件或者組件
複製代碼

第三步，建立vue的項目支架

快速使用命令建立vue項目

vue create 項目名稱//裏面默認使用webpack的打包工具進行一些配置.
複製代碼

第四步，vue項目放置到服務器，壓縮文件

npm install -g @vue/cli-service-global//全局安裝後,方可執行
  cd src//進入到src目錄  app.vue所在的目錄
  vue build //進行編譯後會生成一個 dist的文件夾 ，將這個文件夾發送給後臺人員。
複製代碼

啓動一個已有vue的項目

npm run serve//進入到項目目錄，打開終端，進行執行這條命令.
複製代碼

備註：

官網建立一個項目的詳細地址， 更改端口號：默認端口號是8080,修改默認，找到vue裏面的配置文件config文件進行配置port端口。