5、如何使用Vue呢？

5、如何使用Vue呢？

Vue的本质，就是一个JavaScript的库：

刚开始我们不需要把它想象的非常复杂；

我们就把它理解成一个已经帮助我们封装好的库；

在项目中可以引入并且使用它即可。

那么安装和使用Vue这个JavaScript库有哪些方式呢？

方式一：在页面中通过CDN的方式来引入；

方式二：下载Vue的JavaScript文件，并且自己手动引入；

方式三：通过npm包管理工具安装使用它（webpack再讲）；

方式四：直接通过Vue CLI创建项目，并且使用它；

6、引入方式一：CDN引入

什么是CDN呢？CDN称之为内容分发网络（Content Delivery Network或Content Distribution Network，缩 写：CDN）

它是指通过 相互连接的网络系统，利用最靠近每个用户的服务器；

更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户；

来提供高性能、可扩展性及低成本的网络内容传递给用户；

常用的CDN服务器可以大致分为两种：

自己的CDN服务器：需要购买自己的CDN服务器，目前阿里、腾讯、亚马逊、Google等都可以购买CDN服务器；

开源的CDN服务器：国际上使用比较多的是unpkg、 JSDelivr、cdnjs；

Vue的CDN引入：

<script src="https://unpkg.com/vue@next"></script>
1

Hello Vue案例的实现：

<div id="app">
  <h2>Hello World</h2>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
  const why = {
    template: '<h2>Hello World</h2>'
  }

  const app = Vue.createApp(why);
  app.mount("#app")
</script>