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

Aben
298 阅读4分钟

这是我参与更文挑战的第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库，当我们需要使用的时候，则需要在我们的项目中进行引入，其方法有以下四种：

一、在页面中通过CDN方式进行引入

二、通过下载Vue的JS文件进行手动加入

三、通过npm包管理工具进行安装

四、直接进行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中。

image-20210625103528985.png

如何简单快速使用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组件库的调用。

avatar
文章
阅读
粉丝