搭建Vue开发环境

1.1 简单认识Vue

1.1.1首先，Vue是一款MVVM框架。

        所谓MVVM，即Model-View-ViewModel，即模型-视图-视图模型模式。

        MVVM是MVC的变种，Model和View与MVC模式一致，ViewModel（视图模型层）作为View和Model沟通的桥梁，封装了界面展示和操作的属性和接口等，可以将Model数据的变化实时反映到View上，又可以监听View的变化，在需要的时候更新数据。

        ● View（视图层）：在前端开发中通常来说是DOM层，是用户看得到的界面。

        ● Model（模型层）：也称数据层，是来自服务器请求或固定的一些死数据。

        ● ViewModel（视图模型层）：实现了数据绑定(Data Bindings)，可以在Model层数据发生变化时将变化反映到View上。用户与View进行交互时，ViewModel层又可以通过监听DOM事件的变化，将监听到的变化反映给Model。

1.1.2其次，Vue采用虚拟DOM技术解决浏览器的渲染性能问题。

        传统开发模式上，JS操作DOM时，浏览器会马上从构建DOM树开始从头到尾执行一遍流程，DOM有多少次变化就直接执行多少次流程。

        采用虚拟DOM技术时，当虚拟节点准备映射到视图的时候，会先和上一次的虚拟DOM节点树进行比较，最后只渲染不同的部分到视图中，无须改动其他的节点状态。

1.1.3再次，Vue是一个响应式框架。

        响应式，是指当数据改变后，Vue会通知使用该数据的代码，从而改变所有使用到该数据的数据，进而使关联对应数据的视图自动更新。

1.1.4另外，Vue 3.x的组合式API解决功能分散、难以维护的问题。

        Vue 3支持采用选项式API，通过props、data、methods等相关配置来组织功能逻辑，当组件内容越来越多，使用选项式API的弊端就会非常明显，因为所有配置都在选项中，相同的功能模块分散混合在一个文件里面，其可读性就会降低，并且难以维护。

        Vue 3新增了组合式API语法，可以将不同的功能分开管理，将同一个功能点的内容从选项式配置中抽离出来放到一起，最后通过setup方法统一调用。

1.1.5最后，Vue是一个轻量级的渐进式框架。

        Vue的核心层只关注视图，其他功能可以根据需要逐步引入，所以Vue的核心文件是非常小的，它是一个轻量级的框架。

        渐进式，便是说开发者可以逐步地使用Vue的功能。

1.2搭建Vue 3.x开发环境

1.321 在不安装Vue的情况下引入Vue      

        Vue是一个轻量级的JavaScript框架，它的文件很小，所以可以在页面中通过<script>标签直接引入，可以引入CDN地址提供的文件，也可以从CDN下载文件到本地，然后通过<script>标签引入。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

1.2.2 vue项目快速搭建

       参考教程： Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）-CSDN博客