vue-cli

一.vue-cli
1.什麼是vue-cli
Vue CLI（全稱為Vue.js Command Line Interface）是一個基於Vue.js進行快速開發的完整系統。它不僅是一個工具，也是一個前端工程化的解決方案。Vue CLI的主要目的是簡化Vue.js項目的搭建和開發過程，讓開發者能夠更加專注於業務邏輯的實現，而不是重複性的配置工作。
2.vue-cli安裝
npm install -g @vue/cli
3.創建項目
vue create 項目名稱
選擇自己想要預安裝的插件 之後就是等待自動安裝。
二.vite
1.什麼是vite
Vite（法語意為 "快速的"，發音 /vit/，發音同 "veet"）是一種新型前端構建工具，能夠顯著提升
前端開發體驗。它主要由兩部分組成：

• 一個開發服務器，它基於 原生 ES 模塊 提供了 豐富的內建功能，如速度快到驚人的 模塊熱更新（HMR）。
• 一套構建指令，它使用 Rollup 打包你的代碼，並且它是預配置的，可輸出用於生產環境的高度優化過的靜態資源。
  2.創建項目
  npm create vite@latest
  
  然後運行即可
  
  3.vite的優勢
  （1）更快的開發服務器：Vite的開發服務器使用了原生ES模塊的導入機制，避免了傳統構建工具（如Webpack）中繁瑣的解析過程，因此可以提供大約10倍甚至100倍的開發服務器啓動速度。
  （2）更快的構建速度：由於Vite利用了瀏覽器的ES模塊加載特性，它不需要像Webpack那樣將所有的依賴打包成一個或多個bundle，從而大大減少了構建和打包的時間。
  （3）實時模塊熱替換（HMR）：Vite的實時模塊熱替換功能比Vue CLI的實現更快速，因為它不需要重新加載整個頁面，只需替換變更的模塊即可。
  （4）利用現代JavaScript特性：Vite原生支持ES模塊，這意味着你可以充分利用ES6及以後的JavaScript特性，而無需擔心Webpack等工具可能帶來的兼容性問題。
  （5）更小的打包體積：由於Vite按需加載模塊，它能夠生成更小的打包文件，這對於提高應用的加載速度和減少用户的帶寬消耗非常有幫助。
  （6）動態導入：Vite支持動態導入語法，這使得代碼分割更加容易和直觀，可以更細粒度地控制資源的加載，從而提高性能。
  三.vue-router
  1.什麼是vue-router
  Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構建單頁應用變得輕而易舉。功能包括：
• 嵌套路由映射
• 動態路由選擇
• 模塊化、基於組件的路由配置
• 路由參數、查詢、通配符
• 展示由 Vue.js 的過渡系統提供的過渡效果
• 細緻的導航控制
• 自動激活 CSS 類的鏈接
• HTML5 history 模式或 hash 模式
• 可定製的滾動行為
• URL 的正確編碼
  2.vue-router安裝
  npm install vue-router@4
  四.Pinia
  1.什麼是 Pinia
  Pinia 是 Vue 的專屬狀態管理庫，它允許你跨組件或頁面共享狀態。
  2.pinia安裝
  npm install pinia
  3.狀態管理機制
  狀態管理機制是軟件開發中的一項關鍵概念，尤其是在構建用户界面(UI)時。好的狀態管理能夠使得應用的邏輯更加清晰，維護和調試更加方便，並能夠提升用户體驗。從Vue的狀態管理來看，它的狀態管理主要通過以下方式實現：
  （1） 組件數據（Data）：
  每個Vue組件都可以有自己的數據對象，Vue會自動追蹤這些數據的改變並更新DOM。
  適用於：組件內部的小規模數據管理。
  （2） Vuex：
  Vuex是Vue的一個狀態管理庫，類似於Redux，它為Vue應用提供了一箇中心化的狀態存儲。
  適用於：中大型應用，需要統一管理多個組件的狀態。
  （3） Vue的響應式系統：
  Vue的響應式系統通過“依賴追蹤”來確保當數據變化時，所有依賴於這些數據的視圖和組件能夠自動更新。
  適用於：任何需要數據變化自動更新視圖的場景。