vue3官网介绍，安装，创建一个vue实例
Posted yangyangdt
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3官网介绍，安装，创建一个vue实例相关的知识，希望对你有一定的参考价值。
前言：这一章主要是vue的介绍、安装、以及如何创建一个vue实例。
一、vue介绍
vue3中文官网：建议先自己看官网。
vue是渐进式框架，渐进式指的就是可以在你的项目已经有js，jquery等框架后还可以嵌入vue框架。可以只用我的一部分，而不是一个项目必须全部由我开发。
安装
将 Vue.js 添加到项目中主要有四种方式：
1.以 CDN 包的形式导入。
<script src="https://unpkg.com/vue@next"></script>
那么cdn是什么？
CDN 是vue文件在线上的地址。例如https:.../vue..
我们在访问项目时，首先通过域名找到服务器的ip（一台电脑/服务器），看看你的项目是什么web框架（例如django)，然后找到分配的路由，然后就找到了vue.js文件。所以说是要有一个过程的，那么cdn的作用就是加速这个过程。
CDN能够加速用户的访问速度。
我们的服务器分为华南、华北等几个区域，如果用户是华北区的，那么要访问华北区的服务器比较快，当用户第一次访问华北区的服务器，那么服务器会把数据缓存在华北（边缘）服务器上，访问项目慢实际是访问项目资源（图片、视频等）的快慢。那么下一个人访问的时候直接读取这个华北服务器的缓存，所以访问速度会加快。
2.下载 js 文件并自行托管。
官网没有给出js下载地址。我们可以把上边的cdn在线地址放到浏览器运行，ctrl+s保存就是vue.js.
或者在我上传的资源里去找。
实际上还是本地加载比线上要快很多。下载下来放到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>
以上是关于vue3官网介绍，安装，创建一个vue实例的主要内容，如果未能解决你的问题，请参考以下文章
vue3 官网没有明说的隐藏技能（一）watch与reactive