💻博主现有专栏：

                C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，设计模式、Python机器学习等
🥏主页链接：

                Y小夜-CSDN博客

学习推荐：

        在当今这个飞速发展的信息时代，人工智能（AI）已经成为了一个不可或缺的技术力量，它正在逐步改变着我们的生活、工作乃至整个社会的运作方式。从智能语音助手到自动驾驶汽车，从精准医疗到智慧城市，人工智能的应用已经渗透到了我们生活的方方面面。因此，学习和掌握人工智能相关的知识和技能，对于任何希望在这个时代保持竞争力的个人来说，都已经变得至关重要。

        然而，人工智能是一个涉及数学、计算机科学、数据科学、机器学习、神经网络等多个领域的交叉学科，其学习曲线相对陡峭，对初学者来说可能会有一定的挑战性。幸运的是，随着互联网教育资源的丰富，现在有大量优秀的在线平台和网站提供了丰富的人工智能学习材料，包括视频教程、互动课程、实战项目等，这些资源无疑为学习者打开了一扇通往人工智能世界的大门。

        前些天发现了一个巨牛的人工智能学习网站：前言 – 人工智能教程通俗易懂，风趣幽默，忍不住分享一下给大家。

目录

🎯前端技术的发展

🎃了解前端技术的发展，能够说出使用框架开发项目的优势

🎃什么是单页Web应用

🎯Vue简介

🎃Vue 2和Vue 3的区别

🎯Vue开发环境

🎃 Visual Studio Code编辑器

🥏下载和安装VS Code编辑器

🥏安装中文语言扩展

🥏.安装Volar扩展

🥏 使用VS Code编辑器

🎃Node.js环境

🎃常见的包管理工具

🥏什么是包呢？

🥏npm

🥏 yarn

🥏yarn与npm包管理工具的区别

🎯使用Vite创建Vue 3项目

🎃什么是Vite？

🎃手动创建项目的命令

🎃通过模板自动创建项目的命令

🎃Vue 3项目的目录结构

🎃Vue 3项目的运行过程

🎯前端技术的发展

🎃了解前端技术的发展，能够说出使用框架开发项目的优势

        前端开发的基础语言为HTML、CSS和JavaScript，其中，HTML用于搭建页面的内容结构；CSS用于美化页面的显示效果；JavaScript用于处理用户和页面之间的交互行为。

        为了简化DOM操作和减少开发过程中的浏览器兼容性问题，jQuery提供了一个选择器引擎，它比其他引擎查询速度更快，并为不同浏览器之间的JavaScript不兼容提供了隐式处理方法，因此jQuery深受开发人员的欢迎。jQuery的核心思想是使开发人员仅编写少量的代码就能实现更多的功能。

        为了使移动端网页的使用体验更接近用户习惯，移动端网页通常会做成单页Web应用（Single Page Web Application）的形式。单页Web应用在使用过程中只需要加载一个HTML页面，而传统的网页是用户每单击一个链接都需要加载相应的HTML页面。

        为了提高开发效率，市面上出现了基于MVVM模式的前端开发框架，例如Angular、React、Vue等。这些框架以数据为核心，使用户关注业务逻辑的处理，减少了手动的DOM操作。在Angular、React和Vue这3个框架中，Vue体积较小，在使用上更容易上手、更加灵活。

🎃什么是单页Web应用

        单页Web应用将所有的功能局限于一个Web页面中，仅在该页面的初始化时加载相应的资源（必要的HTML、CSS和JavaScript代码）。

         在页面加载完成后，所有的操作都在这个页面上完成，且不会因用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态地变换页面的内容，从而实现页面与用户的交互。

        单页Web应用有以下3个优点。

• ①  良好的交互体验。在单页Web应用中，内容的改变不需要重新加载整个页面，响应速度更快。
• ②  良好的前后端分离开发模式。后端专注于提供API，更容易实现API的复用。
• ③  减轻服务器的压力。单页Web应用中的数据是通过Ajax获取的，不需要重新加载，服务器的压力较小。

        任何一种技术都有局限性，对于单页Web应用来说，主要的问题有以下2个。

• ①  首屏加载慢，在首次加载时需要将页面中所用到的资源全部加载。
• ②  不利于搜索引擎优化（Search Engine Optimization，SEO）。对于单页Web应用，搜索引擎请求到的HTML页面可能不是包含所有数据的最终渲染页面，这样就很不利于内容被搜索引擎搜索到。

        随着技术的进步，上述问题已经有了相应的解决方案。

        对于第1个问题，可以通过路由懒加载、代码压缩、网络传输压缩等方式解决；对于第2个问题，可以通过服务器端渲染（Server-Side Rendering，SSR）技术解决。

🎯Vue简介

🎃了解什么是Vue

        Vue（读音：/Vjuː/）是一款用于构建用户界面的渐进式框架。其中，“渐进式”是指在使用Vue核心库时，可以在核心库的基础上根据实际需要逐步增加功能。

        使用Vue进行项目开发具有以下优势。

• 轻量级。Vue是一个轻量级的前端开发框架，文件体积小。
• Vue项目基于JavaScript语言开发，开发者不用单独学一门陌生的语言，从而降低了学习的门槛。
• Vue在使用上比较灵活，开发人员可以选择使用Vue开发一个全新项目，也可以将Vue引入现有项目。
• Vue通过虚拟DOM技术减少对DOM的直接操作，并通过尽可能简单的API来实现响应的数据绑定，可支持单向和双向数据绑定。
• Vue支持组件化开发，可提高项目的开发效率和可维护性，使代码更易于复用，便于团队的协同开发。
• Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程化开发，从而提高了项目的开发效率，降低了大型项目的开发难度。

        Vue是基于MVVM模式的框架。

        MVVM主要包含Model（数据模型）、View（视图）和ViewModel（视图模型）。

• Model是指数据部分，负责业务数据的处理；
• View是指视图部分，即用户界面，负责视图处理；
• ViewModel用于连接视图与数据模型，负责监听Model或者View的改变。

Vue的基本工作原理如下图所示。

        View和Model不能直接通信，它们需要借助ViewModel才能进行通信。ViewModel相当于一个观察者，监控着View和Model的动作，实现了View与Model的解耦。

        ViewModel 包含 DOM Listeners 和 Data Bindings。

• DOM Listeners 用于监听View中DOM变化，并在DOM变化时通知Model做出相应的修改。
• Data Bindings用于监听Model中的数据变化，并在数据变化时通知View做出相应的修改。

🎃Vue的4个特性

1. 数据驱动视图

在使用Vue的页面中，Vue会监听数据变化，当页面数据发生变化时，Vue会自动重新渲染页面结构，如下图所示。

2. 双向数据绑定

        Vue实现了双向数据绑定，即当数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着同步变化。

        例如，用户在填写表单时，双向数据绑定可以辅助开发者在无须手动操作DOM的前提下，自动同步用户填写的内容数据，从而获取表单元素最新的值。

3. 指令

        指令主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。

         指令的名称以“v-”开头，作用于HTML中的元素。将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind指令用于实现单向数据绑定，v-if指令用于实现页面条件渲染，v-for指令用于实现页面列表渲染等。

4. 插件

        Vue支持插件，通过加载插件可以实现更多的功能。

        常用的插件有Vue Router（路由）、Vuex（状态管理库）、Pinia（轻量级状态管理库）等，这些插件经过简单配置就可以使用。

🎃Vue 2和Vue 3的区别

        目前，Vue共有3个大版本，分别是Vue 1、Vue 2和Vue 3。其中，Vue 1几乎被淘汰，不建议学习与使用；Vue 2和Vue 3目前被广泛应用，并且Vue 3将会逐步替代Vue 2。

        Vue 3支持Vue 2中绝大多数的API与特性，同时Vue 3还新增了一些特有的功能，并废弃了Vue 2中的一些旧功能。

        Vue 3新增的功能包括组合式（Composition）API、多根节点组件等；废弃的旧功能包括过滤器（Filter）以及$on()、$off()和$once()实例方法等。虽然从表面上看，Vue 3和Vue 2的使用方式没有太大的差异，但Vue 3的底层代码发生了很大变化，包括渲染、数据监听、双向绑定、生命周期等。

        Vue 3的新特性如下。

• ①   体积更小，采用按需编译的方式编译出来的文件体积比Vue 2的小。
• ②   性能提升，运行速度比Vue 2快1.5倍左右。
• ③   具有更好的TypeScript支持。
• ④   暴露了更底层的API，可以通过多种方式组织代码，代码使用上更加灵活。
• ⑤   提供了更先进的组件。Vue创建了一个虚拟的Fragment节点，允许组件中有多个根节点。
• ⑥   提供组合式API，能够更好地组合逻辑、封装逻辑、复用逻辑。

        为了提高开发效率，开发者可以在项目中添加UI组件库。UI组件库可以理解成一个可重复使用的界面设计元素的集合体，使用它可以更快速地开发用户界面。

        目前，主流UI组件库都已经发布了支持Vue 3的版本，常用的UI组件库如下。

• Element Plus组件库：一款基于Vue 3的桌面端组件库。
• Vant组件库：一款开源移动端组件库，它从3.0版本开始支持Vue 3。
• Ant Design Vue组件库：一款用于开发和服务企业级后台产品的组件库，它从2.0版本开始支持Vue 3。

🎯Vue开发环境

🎃 Visual Studio Code编辑器

        Visual Studio Code（简称VS Code）是由微软公司推出的一款免费、开源的代码编辑器，一经推出便受到开发者的欢迎。对于前端开发人员来说，一个强大的编辑器可以使开发变得简单、便捷、高效。

VS Code编辑器具有以下特点。

• 轻巧、极速，占用系统资源较少。
• 具备代码智能补全、语法高亮显示、自定义快捷键和代码匹配等功能。
• 跨平台，可用于macOS、Windows和Linux操作系统。
• 主题界面的设计比较人性化。例如，可以快速查找文件并直接进行开发，可以通过分屏显示代码，可以自定义主题颜色，以及可以快速查看已打开的项目文件和项目文件结构。
• 提供丰富的扩展，用户可根据需要自行下载和安装扩展。

🥏下载和安装VS Code编辑器

打开浏览器，登录VS Code编辑器的官方网站，如下图所示。

        在VS Code编辑器的官方网站中，单击“Download for Windows”按钮，该页面会自动识别当前的操作系统并下载相应的安装包。如果需要下载其他系统的安装包，可以单击按钮右侧的小箭头“  ”打开下拉菜单，就会看到其他系统的安装包对应的下载图标，如下图所示

        将VS Code编辑器安装成功后，启动该编辑器，即可进入VS Code编辑器的初始界面，如图所示。

🥏安装中文语言扩展

        将VS Code编辑器安装完成后，该编辑器的默认语言是英文。如果想要切换为中文，首先单击VS Code编辑器的初始界面左侧边栏中的“      ”图标按钮进入扩展界面，然后在搜索框中输入关键词“chinese”找到中文语言扩展，单击“Install”按钮进行安装，如下图所示。

        安装成功后，需要重新启动VS Code编辑器，中文语言扩展才可以生效。重新启动VS Code编辑器后，VS Code编辑器的中文界面如下图所示。

🥏.安装Volar扩展

        Volar扩展专门用于为“.vue”单文件组件（Single-File Component，SFC）提供代码高亮显示和语法支持。该扩展仅适用于Vue 3项目，不仅提供了语法高亮显示、智能提示、错误提示、格式化等功能，而且支持多根节点组件，例如支持将一个Vue文件中的