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

前言

　　以前是用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目錄下。