【从零开始学习Vue｜第一篇】Vue介绍

猪头男
24 阅读4分钟

1. Vue的介绍

  • Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型
  • Vue提供单文件组件（ Single-File Components），将一个组件的模版（template）、逻辑（script）和样式（style）全部封装在一个.vue为扩展名的文件中
  • Vue的组件可以按照两种不同的风格书写，选项式API和组合式API
    • 使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。（涉及到源码学习）
    • 通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 [ attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

2. MVVM的理解

MVVM是一种软件架构模式，MVVM 分为 Model、View、ViewModel：

  • Model代表数据模型，数据和业务逻辑都在Model层中定义；
  • View代表UI视图，负责数据的展示；
  • ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

3. Vue2和Vue3的区别（待补充）

4. 创建一个Vue应用

4.1. 环境配置（使用vite构建设置）

4.1.1. 下载node环境

4.1.2. 终端输入命令

  • npm create vue@latest （它是Vue官方的脚手架工具，你讲看到一些测试，可选功能提示）
  • 之后打开你要开发的文件夹

终端命令

cd

npm install

npm run dev

  • 当你准备将应用发布到生产环境的时候，请运行

npm run build

该命令会在./dist 文件夹中为你的应用创建一个生产环境的构建版本。

4.1.3. 关于生产部署

  • 开发环境 和 生产环境
  • 在开发过程中，Vue提供了很多功能提升开发体验
    • 对常见错误和隐患的警告
    • 对组件 props / 自定义事件的校验
    • 开发工具集成
  • 然而，这些功能在生产环境中并不会被使用，一些警告检查也会产生少量的性能开销。当部署到生产环境中时，我们应该移除所有未使用的、仅用于开发环境的代码分支，来获得更小的包体积和更好的性能。
  • 通过 create-vue (基于 Vite) 或是 Vue CLI (基于 webpack) 搭建的项目都已经预先做好了针对生产环境的配置。

4.2. 创建Vue应用

4.2.1. 应用实例

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例的

在main.js文件中

import { createApp } from 'vue'

const app = createApp(App)

4.2.2. 根组件

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

  • 由上图Vue官方文档所示一个App组件有TodoList和TodoFooter两个子组件，这两个子组件又有子组件，这就是组件树了

4.2.3. 挂载应用

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app')
  • 其中.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。

4.2.4. 应用配置（待完善）

在 Vue.js 中，应用配置（Application Config） 是指在创建 Vue 应用实例后，通过 app.config 对象进行的全局设置。这些配置会影响整个应用的行为，比如错误处理、性能追踪、编译选项等。

  • 用来做什么？用来统一处理小错误，添加全局工具，优化开发体验，影响整个应用的行为
  1. 访问应用配置

使用 createApp 创建应用实例后，通过 .config 属性访问：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 配置全局行为
app.config.errorHandler = (err, instance, info) => {
  console.error('全局错误:', err, info)
}

app.mount('#app')
avatar
文章
阅读
粉丝