1-vue3入门基础知识与引入

这是我参与更文挑战的第2天，活动详情查看：更文挑战javascript

Hi，我是Aben，连夜更新第二集，欢迎Star---》源代码仓库html

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

前面说了Vue的本质是一个JS库，当咱们须要使用的时候，则须要在咱们的项目中进行引入，其方法有如下四种：java

1、在页面中经过CDN方式进行引入webpack

2、经过下载Vue的JS文件进行手动加入git

3、经过npm包管理工具进行安装github

4、直接进行Vue CLI 来建立项目而且使用web

首先，经过下载后本身手动加入并无很大的技术含量，然后两种（npm与CLI）我会在后续的文章中进行解释，今天咱们来了解一下关于CDN的一些知识。npm

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组件库的调用。