Angularjs和Vue.js腳手架安裝使用總結

前言

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

本文永久更新連結地址：https://www.linuxidc.com/Linux/2018-04/152032.htm