共计 1619 个字符，预计需要花费 5 分钟才能阅读完成。
前言 ：这一章次要是 vue 的介绍、装置、以及如何创立一个 vue 实例。
一、vue 介绍
vue3 中武官网：倡议先本人看官网。
https://v3.cn.vuejs.org/
vue 是 <u> 渐进式 </u> 框架，渐进式指的就是能够在你的我的项目曾经有 js，jquery 等框架后还能够嵌入 vue 框架。能够只用我的一部分，而不是一个我的项目必须全副由我开发。
装置
将 Vue.js 增加到我的项目中次要有四种形式：
1. 以 CDN 包的模式导入。
<script src="https://unpkg.com/vue@next"></script>那么 cdn 是什么？
<u>CDN 是 vue 文件在线上的地址 </u>。例如 https:…/vue..
咱们在拜访我的项目时，首先通过域名找到服务器的 ip（一台电脑 / 服务器），看看你的我的项目是什么 web 框架（例如 django)，而后找到调配的路由，而后就找到了 vue.js 文件。所以说是要有一个过程的，那么 cdn 的作用就是减速这个过程。
<u>CDN 可能减速用户的访问速度 </u>。
咱们的服务器分为华南、华北等几个区域，如果用户是华北区的，那么要拜访华北区的服务器比拟快，当用户第一次拜访华北区的服务器，那么服务器会把数据缓存在华北（边缘）服务器上，拜访我的项目慢理论是拜访我的项目资源（图片、视频等）的快慢。那么下一个人拜访的时候间接读取这个华北服务器的缓存，所以访问速度会放慢。
2. 下载 js 文件并自行托管。
官网没有给出 js 下载地址。咱们能够把上边的 cdn 在线地址放到浏览器运行，ctrl+ s 保留就是 vue.js.
https://unpkg.com/vue@next
或者在我上传的资源里去找。
实际上还是本地加载比线上要快很多。下载下来放到 js 里引入即可。
3. 应用 npm 装置它。
这个咱们临时不必。利用大型项目能够用 npm。
有空再写。可在我的 vue 专栏看到这篇。
4. 应用官网的 CLI 来构建一个我的项目。
它为古代前端工作流程提供了性能完备的构建设置 (例如，热重载、保留时的提醒等等)。
有空再写。可在我的 vue 专栏看到这篇。
应用 vue 开发的益处
1. 因为 vue 采纳渐进式框架结构，MVVM（model view viewmodel)，数据层与视图层拆散，（响应式框架）通过 vm 把数据层的数据渲染到指定的标签外面。
2. 响应式框架，数据层与视图层拆散，数据层数据变了，视图层的渲染就变了，缩小了 dom 操作，减少了页面加载速度。
3. 组件化开发。
简洁来说就是：体积小，数据双向绑定，有很多成熟的组件。
二、根底
1. 创立 vue 实例
步骤：
1）下载并引入 vue.js
2）body 里创立 id=app 的 div
3）Script 外面创立 vue 实例，关联容器，Vue.createApp({}).mount(‘#app’)
数据层：
const data = {a: 1}
视图层：
const app={
data() {
return data
}，
}
创立 vue 实例：
const vm =Vue.createApp(app)
关联 app 容器
vm.mount(‘#app’)
或者合起来写：
const data = {a: 1}
const vm = Vue.createApp({
data() {
return data
}}).mount(‘#app’)
运行模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.global.js"></script>
</head>
<body >
<div id="app">
Hello Vue
</div>
</body>
<script type="text/javascript">
const data = { }
const vm = Vue.createApp({data() {return data},
})
vm.mount('#app')
</script>
</html>