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

来源:https://www.cnblogs.com/shapeY/archive/2018/04/24/8881743.html
-Advertisement-
Play Games

前言 之前是用Vue的,現在由於工作原因,開始使用Angular。分別是Vue2和Angular5入的坑。只是從使用上來對比總結,加深記憶,避免混淆。 什麼 ? 你問實現原理的異同及優劣? 本寶寶還在努力學習中,也許有生之年你可以看到分析貼。 不管用什麼框架,創建項目都是第一步。發展到現在,Angu ...


前言

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

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

創建項目

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Oracle資料庫伺服器DG從庫重啟後,無法完成數據同步,具體報錯信息如下: 一、報錯信息 alter log報錯 二、錯誤原因分析 根據報錯信息可以看到通過tns連接logdb服務名存在問題,可通過排查監聽是否啟動,是否有防火牆限制等。 三、處理步驟 通過排查監聽和防火牆限制,發現沒有問題,主庫通 ...
  • 什麼是資料庫: 資料庫(database)是按照數據結構來組織、存儲和管理數據的倉庫,每個資料庫都有一個或多個不同的API用於創建、訪問、管理、搜索和複製所保存的數據。 什麼是mysql: mysql是關係型資料庫管理系統,可以更好的支持WEB應用。 關係型資料庫與非關係型資料庫: 關係型資料庫是通 ...
  • list類型是一個鏈表結構,主要功能有push,pop等。而且list是一個雙向鏈表,可以通過相關操作進行集合的頭部或者尾部添加,刪除元素。 lpush key string 在key對應的list的頭部添加字元串元素,返回1表示成功,0表示key存在且不是list類型 rpush key stri ...
  • [20180423]flashback tablespace與snapshot standby.txt--//預設建立表空間是打開flashback on,如果某個表空間flashback off,在dg啟動snapshot standby時註意,可能"回不來",--//通過測試說明問題.1.環境: ...
  • 首先是下載圖解 1、首先卸載centos7中自帶的mariadb rpm -qa|grep mariadb //查詢出來已安裝的mariadb rpm -e --nodeps 文件名 //卸載mariadb,文件名為上述命令查詢出來的文件 2、查看是否已經安裝了mysql rpm -qa | gre ...
  • 一,添加圖標 你的應用在iPhone主屏幕上的標準圖標(Icon.png)是57像素*57像素的正方形,PNG格式,不能有透明效果或者圖層,72DPI.除些之外,你還可以提供一個同樣格式的114像素*114像素的高解析度圖標([email protected]).當用戶的設備是Retina屏幕的時候,這個圖標就 ...
  • Android 自定義支持快速搜索篩選的選擇控制項 項目中遇到選擇控制項選項過多,需要快速查找匹配的情況。 做了簡單的Demo,效果圖如下: 源碼地址: "https://github.com/whieenz/SearchSelect" 這個控制項是由Dialog+SearchView+ListView實 ...
  • 上一篇博客我們在現實使用和麵試角度講解了Promise(原文可參考《面向面試題和實際使用談promise》),但是Promise 的方式雖然解決了 callback hell,但是這種方式充滿了 Promise的 then() 方法,如果處理流程複雜的話,整段代碼將充滿 then,代碼流程不能很好的 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...