前言

　　之前是用Vue的，現在由於工作原因，開始使用Angular。分別是Vue2和Angular5入的坑。只是從使用上來對比總結，加深記憶，避免混淆。 什麽 ？ 你問實現原理的異同及優劣？ 本寶寶還在努力學習中，也許有生之年你可以看到分析貼。

不管用什麽框架，創建項目都是第一步。發展到現在，Angular 和 Vue 都有官方的腳手架用來快捷的創建和配置項目。

創建項目

　　Angular和Vue的腳手架都依賴於NodeJs和Npm，所以先確認自己的環境。兩個腳手架都需要全局安裝

//Angular-cli
npm install -g angular-cli
//vue-cli
 

npm install -g vue-cli

　　可以使用版本檢查命令確認是否安裝成功，命令行中 ng -v 或者 vue -V ，如果可以正常輸出版本，就說明安裝成功了。註意vue-cli版本檢查，後面加的參數是 大寫的 V。

　　現在可以開始創建項目了。

　　Angular-cli 使用 ng new 命令創建新項目，可以在創建時指定style風格，是否需要帶routing等（詳細配置）；創建之後，會默認自動安裝依賴，當然也可以通過--skip-install跳過安裝。

　　安裝完依賴之後，進入目錄，即可通過 ng serve 命令調試，可以指定host、port、是否自動打開瀏覽器，env等( 詳細配置 )，env是用於管理配置文件的，後續也會提到。

//創建ngtest項目,指定scss風格的style
ng new --style=scss ngtest
//安裝完依賴之後，進入目錄
cd ngtest
//調試
ng serve --open --port=3001

　　如果依賴正常，就會看到Angular項目的初始界面了，工程創建成功。

　　Vue-cli 使用 vue init <template> <app-name> 命令創建新項目。腳手架提供了多種模版，可以按需選擇模版，一般使用 webpack模版。可以通過vue list 命令查看所有的模版

// 創建Vue項目
vue init webpack vue-test
 
// 進入目錄
cd vue-test
// 啟動調試
npm run dev

　　創建Vue項目時，會有多個提示引導使用者來配置項目，如果沒有特殊的偏好，一路默認下去即可。

　　進入工程目錄，npm run dev即可調試項目，正常就會看到Vue的初始界面。

　　Vue-cli 在 package.json 中查看到不同的命令使用的配置文件，如：dev時入口配置文件為 ‘build/webpack.dev.conf.js’ ，Vue-cli的webpack配置都在build目錄下，參考 webpack的 配置文檔 ，慢慢就可以掌握腳手架中的配置 , 且腳手架將一些常用配置放在了config目錄中。而Anguar雖然也是基於webpack的，但是其中webpack的配置要通過ng eject導出才可以看到，而項目的配置都在 .angular-cli.json中完成 ( 詳細配置 ) 。

項目結構

　　Angular和Vue的目錄結構非常類似，常用的就源碼src目錄和一些配置項。

調試/打包

　　Vue-cli調試和打包的都在build目錄中修改配置；而Angular-cli 則命令行中進行參數配置，按照默認命令時，會有以下配置，當然可以根據需求進行更改( 詳細配置 )。不管哪個腳手架，仔細了解下webpack都是很有必要的。

Angular-cli 命令新建文件

　　Angular-cli還提供了快捷新建文件的功能，通過 ng generate [type] [filename] 來新建指定文件 ( 詳細配置 ) ，新建文件時可以帶參數來進行配置，也可以直接在 .angular-cli.json配置文件的defaults中進行配置。比如在創建component時，就可以配置 組件的前綴(prefix) , 是否被引入到模塊(skip-import)，是否被導出(export)，是否帶測試文件(spec)等等，可以節省很多時間。當然創建時也可以指定路徑 ng g c test/test , 在test目錄中創建test組件，當然都是在App目錄下。

Angular 和 Vue 使用的對比總結 -- 腳手架