一、Vue 初识
Vue 是一个 Web 前端框架，是一个 用于构建用户界面的渐进式 JavaScript 框架。
Vue 框架基于标准的 HTML、CSS、JavaScript 构建，并且提供了一套声明式的、组件化编程模型；所谓渐进式即我们可以在项目开发中一点点来引入和使用 Vue，而不一定需要全部使用 Vue 来开发整个项目。
二、Vue 引入
前面说到 Vue 是一个渐进式的框架，因此我们可以在 HTML 中引入并使用 Vue 框架，引入 Vue 框架的方式有两种：
- 直接在页面中使用
script标签和 CDN 的方式引入 - 直接使用
script标签引入下载到本地的 Vue 源码（JavaScript 文件）
除此之外也可以使用 npm 工具来安装并使用，或者通过 Vue CLI 或者 Vite 工具来创建 Vue 项目。
使用 CDN 方式引入 Vue
使用 VSCode 创建 HTML 页面，并创建一个 div.app 元素，使用 script 标签引入 Vue 的 CDN 地址 https://unpkg.com/vue@next，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
</body>
</html>
接着我们就可以使用 Vue 来进行开发了，Vue 的源码中提供了一个全局对象 Vue，使用个步骤如下：
- 调用
Vue全局对象的createApp方法创建一个 app - 将 app 挂载到具体的元素上
再增加一个 script 标签，在该标签中使用 Vue 全局对象，具体代码如下：
// 使用 createApp 方法创建一个元素
const app = Vue.createApp ({
// app 元素的内容
template: "<h1>你好，Vue</h1>"
})
// 将创建的 app 元素对象挂载到具体的 div.app 元素上
app.mount("#app")
通过 VSCode 的 LiverServer 打开页面：
打开浏览器的检查工具：
可以看到我们通过 createApp 方法创建的一个 h1 元素被嵌入到了 div.app 中，这就是挂载，是通过元素对象的 mount 方法实现的。
当然这里的 app 只是一个对象的名字，我们可以给他一个其他的名字，也可以挂载到别的已存在的元素上。
我们可以在创建一个 HTML 文件来使用 Vue 全局对象的 createApp 方法和 mount 方法，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="info"></div>
<hr>
<div class="box"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const name = Vue.createApp({
template: '<span>这是挂载到 info div 中的内容</span>'
})
const item = Vue.createApp({
template: '<strong>这是挂载到 box div 中的内容</strong>'
})
name.mount('.info')
item.mount('.box')
</script>
</body>
</html>
使用 LiverServer 打开页面：
createApp 方法在调用的时候需要传入一个对象 {}，该对象的其中一个属性就是 template，根据以上的例子，template 中就是我们要显示的 HTML 的内容。
使用本地 Vue 的 JS 源码
在使用 CDN 的方式引入的时候有一定的网络消耗，使用本地 Vue 源码引入的方式效率会更高，我们可以将 CDN 地址拷贝并在浏览器中打开：
我们可以将全部的源码拷贝到一个本地的 vue.js 文件中，并在 script 标签中引入。
创建一个 HTML 页面，并引入 vue.js 文件，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
</body>
</html>
接着再增加一个 script 标签，使用 Vue 进行开发，具体代码如下：
const app = Vue.createApp({
template: "<h1>Hello Vue</h1>"
})
app.mount("#app")
使用 LiverServer 打开页面：
原文链接：https://juejin.cn/post/7314365637308170266 作者：RiemannHypo
