## 1. 說明:

????github: https://github.com/angular/angular-cli

## 2. 使用angluar-cli快速創(chuàng)建工程化angluar項目

????### 完整模板創(chuàng)建項目:

????????npm install -g @angular/cli

????????ng new my-project (--skip-install) 不要安裝 （--style css）樣式 --routing fasle（不要安裝路由）

????????cd my-project

????????ng serve

????????默認(rèn)localhost:4200

????### 模板項目的結(jié)構(gòu)

????????|-- e2e : 端對端的測試目錄 一般開發(fā)時候不用

????????|-- node_modules

????????|-- src : 源碼文件夾

????????????|-- app: angluar組件及其模塊化相關(guān)資源文件夾

????????????????|--app.component.css：應(yīng)用樣式

????????????????|--app.component.html：應(yīng)用html

????????????????|--app.component.ts： 根組件文件

????????????????|--app.module.ts：根模塊文件

????????????????|--app-routing.module.ts：根路由組件

??????????????|-- assets: 靜態(tài)文件及圖片等資源

????????????|-- environments: 多環(huán)境修改文件

????????????????|--environment.prod：生產(chǎn)環(huán)境配置

????????????????|--environment: source和dev環(huán)境配置

????????????|--browserslist：為css維護兼容性針對css

????????????|--favicon.ico：應(yīng)用圖標(biāo)

????????????|--index.html：根html

????????????|--karma.conf.js：單元測試文件配置

????????????|--main.ts: 腳本執(zhí)行入口點（入口文件）

????????????|--polyfills.ts：瀏覽器兼容文件針對js

????????????|--styles.css：全局樣式文件

????????????|--test.ts：測試文件

????????????|--tsconfig.app.json：ts編譯器的配置

????????????|--tsconfig.spec.json：測試文件

????????????|--tslint.json：tslink語法檢查配置文件

????????|-- .editorconfig ide 配置文件

????????|-- .gitignore: git版本管制忽略的配置

????????|-- angular.json: angluar命令行控制文件（支持多項目）

????????|-- package.json: 應(yīng)用包配置文件?

????????|-- README.md: 應(yīng)用描述說明的readme文件

????????|-- tsconfig.json:ts配置文件

????????|-- tslint.json：tslink語法檢查配置文件

##3.項目打包發(fā)布(本地測試dist文件)

????npm run build

????npm install express-generator -g??全局安裝express-generator生成器?

????express expressDemo???（expressDemo是項目名）創(chuàng)建一個express項目

????cd expressDemo

????npm install

????把dist目錄下的所有文件復(fù)制到express項目的public文件夾下

????然后運行 $ npm start 啟動expressDemo

????訪問 http://localhost:3000?