Vue-Lecture1-Notes

EricWang1358

于 2024-09-30 22:04:51 发布

阅读量1k

点赞数 10

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74331272/article/details/142663089

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

渐进式框架

Vue 被称为“渐进式框架”，是因为它允许开发者根据项目的需求逐步引入和使用其功能，而不需要一次性使用整个框架。简单来说，Vue 提供了从简单到复杂的功能层次，可以灵活选择使用。

按需使用：Vue 的核心功能可以用于基本的页面渲染和数据绑定，开发者可以仅使用这些功能来构建简单的应用。而随着需求的增加，可以逐步引入例如路由管理、状态管理等高级功能
灵活扩展：Vue 的设计使得它既适合小型项目的使用，又能随着项目规模的扩大而扩展使用更多的功能。例如，初始阶段可以仅使用 Vue 处理表单和简单的 DOM 操作，后期再引入 Vue Router 和 Vuex 等功能来管理复杂的前端逻辑
生态系统的支持：Vue 具有丰富的生态系统，开发者可以根据项目的复杂程度，灵活引入插件和第三方库。它的这种渐进式特性使得框架非常适合从小型项目到大型项目的开发需求

这种渐进式的设计理念使 Vue 更加易学易用，同时也具备强大的可扩展性，适应不同规模的应用开发需求。

Learning Path:

局部使用 Vue (Partial Use of Vue):
- 快速入门 (Quick Start): This suggests that users begin by understanding basic Vue concepts, how to set it up, and simple integration into projects.
- 常用指令 (Common Directives): Learning frequently used Vue commands such as v-if, v-for, etc., which allow for conditional rendering and loops.
- 生命周期 (Lifecycle): Understanding Vue's lifecycle hooks, which manage the stages of a Vue component (e.g., mounted, created).
整站使用 Vue (Full-Site Use of Vue):
- Vue项目构建工具 (Vue Project Build Tools): This refers to using tools like Vue CLI or Vite for project setup and management.
- Vue项目目录结构 (Vue Project Directory Structure): Learning the standard organization of a Vue project, including where components, assets, and other resources are placed.
- Vue项目开发流程 (Vue Project Development Process): Understanding the flow of developing a Vue-based project, from setting up the environment to deploying.
- Element-Plus: Using the Element-Plus UI library for Vue 3, which provides pre-built components for faster development.

使用 Vue 3 进行快速入门

准备工作：
- 设置 HTML 页面：首先创建一个 HTML 文件，并在其中定义一个带有 id="app" 的 div 元素。这个 div 将是 Vue 应用程序实例的挂载点。
- 引入 Vue 模块：通过 <script> 标签从 CDN 加载 Vue 模块（在这里使用 https://unpkg.com/vue@3/dist/vue.esm-browser.js），无需在本地安装依赖项。
创建 Vue 应用程序：
- 使用 createApp 函数创建一个 Vue 应用实例。该实例将控制 id="app" 的 div，并通过该 div 绑定 Vue 应用和页面上的 DOM 元素。
渲染用户界面：
- 定义一个数据对象 msg，其值为 "hello vue3"。通过 Vue 的插值表达式 {{ msg }}，将该值动态渲染到页面上，显示为“Hello Vue”。

说明：

div：<div> 是 HTML 中的一个标签，用来定义网页中的“区块”。（通俗解释：可以想象成网页上的“容器”或“盒子”，用来把不同的内容分开。）
挂载点：Vue 应用程序绑定并控制的页面部分。通常是一个带有 id 的元素。（通俗解释：想象 Vue 需要一个地方来“放”它的功能，这个地方就是挂载点，类似于我们把物品放进一个抽屉中。）
Vue 应用程序实例：Vue 通过 createApp 创建的实例，控制网页上指定部分的内容和行为。（通俗解释：相当于一个“指挥中心”，它能管理和更新页面上的内容。）
HTML 文件：用来定义网页结构的文件，包含文字、图片、链接等元素。（通俗解释：就像建筑的蓝图，HTML 文件决定了网页上的内容如何布局和显示。）
Vue 模块：包含 Vue 框架功能的代码，通常通过 import 或 <script> 标签引入。（通俗解释：可以理解为 Vue 框架的“工具箱”，你可以从中拿出各种工具来搭建网站功能。）
<script> 标签：这是 HTML 中用来嵌入或引用 JavaScript 代码的标签。（通俗解释：相当于一个“开关”，它能在网页中启动 JavaScript 代码，使网页具有动态交互功能。）
控制 id="app" 的 div：Vue 应用控制的 div 元素，通常通过 id 属性来选择，比如 id="app"。（通俗解释：就像 Vue 需要找到一个“舞台”（div 元素）来展示它的内容，而 id 是这个舞台的名字。）
DOM 元素：网页结构的表示方式，它把网页的每个部分都作为一个可操作的对象。（通俗解释：可以把 DOM 看作是网页的“骨架”，它定义了网页的结构，JavaScript 和 Vue 可以用它来控制和修改网页内容。）
数据对象 msg：Vue 实例中的数据，通常用于存储应用状态或内容。在例子中，msg 保存了字符串 "hello vue3"。（通俗解释：类似于一个“信息储存器”，里面装着我们要在网页上展示的数据。）
插值表达式：Vue 中用 {{ }} 来显示动态数据的方式。（通俗解释：可以理解为 Vue 的“显示窗口”，通过它把代码里的数据展示到网页上。）

VS Code Vue开发相关插件

Chinese (Simplified) Language Pack for Visual Studio Code：这是针对中文开发者的语言包插件，能够将 VS Code 的界面翻译成简体中文，方便中文用户更好地使用和理解开发工具。
ESLint：一个用于检查代码质量的插件，它能够帮助你遵守编程规范，自动检测代码中的潜在错误，并提供修复建议。对于 Vue 开发来说，它能够确保你的 JavaScript 或 TypeScript 代码符合规范，减少错误的发生。
GitLens — Git supercharged：这是一个非常强大的 Git 插件，它扩展了 VS Code 自带的 Git 功能。你可以轻松查看代码的提交历史、查看每行代码的更改记录，甚至对比不同版本的代码。
Vetur：Vue 开发最常用的插件之一，提供了对 Vue 文件的语法高亮、自动补全、错误检查、格式化等功能。它还支持单文件组件 (SFC)，能够帮助你更高效地编写和调试 Vue 代码。
Prettier - Code formatter：这是一个代码格式化插件，支持多种语言。对于 Vue 开发者来说，它能够自动格式化你的代码，使代码风格保持一致，从而提升代码的可读性。

Node.js、npm 和 Vue.js ：

Node.js：Node.js 是一个基于 Chrome V8 引擎构建的 JavaScript 运行环境，它允许开发者在服务器端运行 JavaScript。Node.js 常用于构建可扩展的网络应用程序、API 和后端逻辑。它让 JavaScript 不仅仅局限于浏览器，而是可以在服务器上运行。
npm（Node Package Manager）：npm 是 Node.js 的默认包管理工具。它帮助开发者管理项目中的库和依赖。通过 npm，你可以安装、更新以及管理各种第三方包和工具，例如 Vue.js 及其相关插件。
Vue.js：Vue.js 是一个渐进式的 JavaScript 前端框架，用于构建用户界面和单页面应用（SPA）。Vue 提供了双向数据绑定、组件化开发、路由等功能，帮助开发者构建动态和交互性强的网页应用。