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

前言

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

       無論用什麼框架,建立項目都是第一步。發展到如今,AngularVue 都有官方的腳手架用來快捷的建立和配置項目。vue

建立項目

  Angular和Vue的腳手架都依賴於NodeJs和Npm,因此先確認本身的環境。兩個腳手架都須要全局安裝webpack

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

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

  如今能夠開始建立項目了。github

  Angular-cli 使用 ng new 命令建立新項目,能夠在建立時指定style風格,是否須要帶routing等(詳細配置);建立以後,會默認自動安裝依賴,固然也能夠經過--skip-install跳過安裝。web

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

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

  若是依賴正常,就會看到Angular項目的初始界面了,工程建立成功。npm

  Vue-cli 使用 vue init <template> <app-name> 命令建立新項目。腳手架提供了多種模版,能夠按需選擇模版,通常使用 webpack模版。能夠經過vue list 命令查看全部的模版json

// 建立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目錄下。

相關文章
相關標籤/搜索