Vue3 + TS（一）- 邂逅Vue

一、认识Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

1.1 Vue 的安装

安装方式：

• CDN引入；

• 下载Vue的js文件，并手动引入；

• 通过npm包管理工具安装使用；（webpack）

• 直接Vue CLI创建项目，并使用

1.1.1 CDN引入：

内容分发网络 (Content Delivery Network / Content Distribution Network)

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

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

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

 

常见的CDN服务器大致分为两种：

• 自己的CDN服务器：目前阿里、腾讯、亚马逊、Goolgle都可以购买CDN服务器；

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

Vue的CDN引入：

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

案例的实现：

<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
    template: '<h2>hello Vue3</h2>'
  })
  app.mount("#app");    // 将app挂载到id为app的div上
</script>

1.1.2 下载和引入

下载Vue的源码，可以直接打开CDN的链接：

• 打开链接，复制其中所有的代码；

• 创建一个新的文件，比如vue.js，将代码复制到其中；

通过script标签，引入刚才的文件：

<script src="../js/vue.js"></script>

案例的实现：

<div id="app"></div>
<script src="../js/vue.js"></script>
<script>
  const app = Vue.createApp({
    template: '<h2>hello Vue3</h2>'
  })
  app.mount("#app");
</script>

1.2 计数器案例

如果我们希望实现一个计数器的案例：

• 点