第一章初识Vue

一、引言

1.1. 概述

Vue 2 和 Vue 3 官网：

https://v2.cn.vuejs.org/

https://cn.vuejs.org/

Visual Studio Code 官网

Visual Studio Code - Code Editing. Redefined

Vue 是一款用于快速构建用户界面的渐进式框架，采用自底向上增量开发的设计，核心库只关注视图层。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。

Vue是一个框架，也是一个生态。我们可以用不同的方式使用Vue：

1. 无需构建步骤，渐进式增强静态的HTML

2. 在任何页面中作为Web Components嵌入

3. 单页应用 (SPA)

4. 全栈/服务端渲染 (SSR)

5. Jamstack/静态站点生成 (SSG)

6. 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面。

1.2. Vue与Vue3

目前市面上主要存在的两个Vue版本分别为Vue2和Vue3，其中Vue2在各大企业中还广泛应用，而Vue3是未来的趋势，它在性能、内核、TS支持度以及封装等各方面对比Vue2有了极大提升。因此，我们在学习Vue时，需要同时掌握Vue2和Vue3两个版本的技术知识。本学习栏目将带领大家快速掌握这些内容。

1.3. Vue学习路线

1. Vue2核心技术：如 Vue Router（路由管理）、Vuex（状态管理）等

2. 移动端项目练习：Vant组件库和ESLint（掌握企业级开发规范）

3. Vue3核心技术：如构建工具Vite、Pinia（状态管理）等

4. PC端管理系统练习：引入Element组件库

1.4. Vue的渐进式

我们前面提到Vue是一个渐进式的框架，这意味着它可以适应项目的不同阶段，从简单的单页应用(SPA)开始，到复杂的大型应用。

Vue.js 的主要特性包括：

响应式数据绑定和组件系统。
解耦视图和数据，可以使得维护变得更简单。
可以用于构建单页面应用，也可以嵌入到已经存在的应用中。

渐进式表明Vue可以采取不同的方式来应对不同的开发需求。它允许你按需引入Vue的不同特性，例如：

可以只使用Vue的响应式系统。
可以使用Vue进行构建用户界面的过程，同时不使用Vue的构建工具和库。

这样，Vue 就为不同的开发场景提供了灵活的解决方案。

而我们针对Vue的话也是一个渐进式的学习过程，通过掌握Vue，在日常企业的前端开发工作中，能极大地提高我们的开发效率。

Vue的两种使用方式

1. Vue核心包开发场景：局部模块改造

2. Vue核心包&Vue插件工程化开发场景：整站开发

二、Vue初体验

2.1. Vue示例演示步骤

构建用户界面，创建Vue实例，初始化渲染步骤：

1. 准备容器

2. 引包（官网：开发版本/生产版本）

3. 创建Vue实例 new Vue()

4. 指定配置项 el data => 渲染数据

el 指定挂载点

data 提供数据

2.2. 示例代码

我们通过VSCode来创建一个简单的Vue框架页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Introduction</title></head><body><!-- 创建Vue实例，初始化渲染1. 准备容器(Vue所管理的范围)2. 引包（开发版本包/生产版本包 官网 当前学习引入开发版本即可）3. 创建实例4. 添加配置项 => 完成渲染--><div id="app"><!-- 这里作为编写一些用于渲染的代码逻辑 -->{{ msg }}</div><!-- 引入的时开发版本包 -包含完整的注释和警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({// 通过el配置选择器，指定Vue管理的是哪个盒子el: '#app',// 通过data提供数据data: {msg: 'Hello 王哲晓'}})</script></body>
</html>