1-vue3入門基礎知識與引入

這是我參與更文挑戰的第2天，活動詳情查看：更文挑戰

Hi，我是Aben，連夜更新第二集，歡迎Star---》源代碼倉庫

Vue簡介

vue做爲一個漸進式JS框架，官網：v3.vuejs.org/ 。Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。在大部分使用者看來，須要你對HTML，CSS，JS 有基礎的認識，對於Vue3與Vue2的區別會在之後的文章中進行表述。 咱們須要經過學習Vue瞭解到Vue的基礎語法、組件化開發、CLI、核心語法、route路由的使用、Vite2技術、webpack技術。另外後面我還會對git，less/sass，JS（一些方面詳解）、TS、服務器搭建與使用、自動化部署進行講解。

如何引入vue

前面說了Vue的本質是一個JS庫，當咱們須要使用的時候，則須要在咱們的項目中進行引入，其方法有如下四種：

1、在頁面中經過CDN方式進行引入

2、經過下載Vue的JS文件進行手動加入

3、經過npm包管理工具進行安裝

4、直接進行Vue CLI 來建立項目而且使用

首先，經過下載後本身手動加入並無很大的技術含量，然後兩種（npm與CLI）我會在後續的文章中進行解釋，今天咱們來了解一下關於CDN的一些知識。

Vue的CDN引入：

<script src="https://unpkg.com/vue@next"></script>
複製代碼

CDN引入

​ CDN稱爲內容分發網絡（Content Delivery Network或Content Distribution Network，縮 寫：CDN），經過CDN的使用，咱們能夠利用一個互相鏈接的網絡系統中最靠近咱們物理機的一臺服務器，將網絡資源進行更高性能、高擴展與低成本地傳輸。在平常使用中，分爲兩種CDN服務器，一個是做爲咱們私人購買的服務器，另外一個是CND開源服務器（若有JSDelivr、cdnjs）

​ CDN解決了什麼問題：它經過組建了服務器網絡，在源站與擁有所需資源的最接近用戶請求位置，對最終用戶請求進行響應，從而分載內容服務器的流量，使得了用戶與提供商都從中獲益。而失去CDN，每一個用戶都將先源服務器進行請求，而源服務器進行響應，這將致使用戶加載流量大幅度增長而且請求時間增長，與供應商服務器負載過大，載幅不均衡，源站出現故障概率大幅度上升。這也就是爲何說CDN的出現使得了網絡資源實現更高性能、高擴展與低成本地傳輸。（好比廣州用戶須要請求北京數據，而同一時間不只有廣州還有上海、深圳、成都、大連、天津...的請求，將會出現北京服務器對這些請求響應負載過大，而這些用戶在請求數據的時候不只僅要克服數據的響應時間還要等待物理上的傳輸時間）

​ 工做原理：CDN能夠將多個網絡資源緩存於全球多個地點，這些地點被稱爲「入網點」（PoP），經過這些入網點，每一個內容請求會讓最終用戶映射到位置最優的 CDN 服務器，服務器會用已請求文件的緩存（預存儲）版本予以響應。若是定位文件失敗，CDN 會尋找 CDN 平臺其餘服務器上的內容，而後向最終用戶發送響應。然而，若是內容不可用或過期，CDN 會承擔源站服務器請求代理的角色，並存儲獲取的內容，爲將來請求提供服務。

如圖所示：A爲客戶機，BCDE爲PoP,當A須要數據資源，首先由B發送，如B無資源，能夠由父節點D發送，如D也無資源將由源站發送。而在發送以後將會有緩存於PoP中。

如何簡單快速使用vue3

這裏採用CDN引入的方法進行講解

<div id="app">
        <h2>Hello World </h2>
  </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script> const app = Vue.createApp({}); app.mount("#app") </script>
複製代碼

第一步是先要建立htmldom Element ；第二步引入vue的CDN ；第三步對象指向vue實例，在Vue中對全局變量定義爲Vue ，它會返回一個應用程序實例。此實例提供應用程序上下文。應用程序實例掛載的整個組件樹共享相同的上下文。第四步是對象掛載HTML的element。所以能夠實現vue組件庫的調用。