Vue3 学习笔记，Vue 简介及如何引入 Vue3 框架-51CTO.COM

大家好，从本篇文章起，我将从 Vue 最基础的内容开始梳理相关，本篇文章我将聊一聊什么是 Vue ,以及如何引入 Vue3 框架，以及一些开发环境的配置。

Vue.js 是什么？解决了哪些问题？

Vue.js 是一个开源的 JavaScript 框架，用于构建用户界面。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 能够帮助开发人员构建单页面应用程序（SPAs），尤其是那些具有复杂的用户界面和交互的应用程序。

Vue.js 的核心是一个轻量级的视图模型，它允许开发人员声明式地将数据绑定到 DOM，并使用组合的组件复用视图逻辑。这使得 Vue.js 非常适合用于构建可维护的单页面应用程序。

如何引入 Vue3.x 框架

通过 script 标签引入：

<script src="https://unpkg.com/vue@next"></script>

通过 npm 安装并通过 import 引入：

npm install vue

import Vue from 'vue';

通过 CDN 引入并使用 Vue 全局变量：

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

new Vue({...});

通过 Vue CLI 创建并构建项目：

npm install -g @vue/cli

vue create my-project

cd my-project

npm run serve

Vscode开发环境配置

引入Vue开发环境后，我们还需要配置编辑的相关开发环境，帮助我们更高效的开发Vue，目前前端用的最多的就是Vscode，下面一些插件是我建议的，欢迎大家在评论区补充。

Vetur - Vue.js 的语法高亮、智能提示、自动格式化、单文件组件 (SFC) 语法验证和 Lint。
Volar - 是一个可以帮助您在 Visual Studio Code 中调试 Vue.js 应用程序的插件。它提供了一组丰富的调试功能，包括断点、单步执行、变量查看和代码替换等。
ESLint - 代码规范检查工具，能够帮助您找到和修复 JavaScript 代码中的错误和不规范。
Prettier - 代码格式化工具，能够自动将代码格式化为您所设定的风格。
vue-peek - 快速跳转到 Vue 组件定义的插件。
vue-beautify - 用于格式化 .vue 文件的插件。
vue-i18n - 用于国际化 Vue.js 应用程序的插件。
Live Server - 它可以帮助您在本地启动一个简单的 HTTP 服务器，以便您可以在浏览器中预览您的 Web 项目。

如果您需要进行服务端渲染 (SSR)，还可以安装下面这些插件：

vue-server-renderer - Vue.js 服务端渲染的插件。
vue-ssr-webpack-plugin - 用于打包服务端渲染应用程序的 Webpack 插件。

一个关于 Vue 3 的 Composition API 简单案例

Vue 3 的 Composition API 是一种新的组件编写方式，它可以帮助您使用函数式编程的思想来编写 Vue 组件。

在传统的 Vue 组件中，我们通常使用 options 对象来定义组件的选项，如 data、methods、computed 等。

而在 Vue 3 的 Composition API 中，我们使用 setup 函数来定义组件的逻辑。 Vue 3 的 Composition API 还提供了一系列工具函数，如 ref、computed、watch 等，帮助我们更加方便地实现组件的功能。

举个例子，下面是使用 Vue 3 的 Composition API 实现一个计数器组件的代码：

<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value += 1
    }

    return {
      count,
      increment
    }
  }
}
</script>

在这个代码案例中，我们使用了 Vue 3 的新的 Composition API 来定义一个组件。我们在 data 方法中定义了一个 count 变量，并在模板中使用了它。我们还使用了 @click 指令来监听按钮的点击事件，并在点击后将 count 变量的值加 1。

当您点击按钮时，计数器会自动增加，并显示在按钮上。这就是一个简单的 Vue 3 应用程序的工作原理。

希望这个代码案例能够帮助您了解 Vue 3 的基本用法。

Vue 3 的 Composition API 为我们提供了一种新的、灵活的编写 Vue 组件的方式。它能够让我们更加方便地使用函数式编程的思想来实现组件的功能。

结束语

今天的介绍就到这里，下面的文章我将继续分享 Vue 相关基础入门的内容，比如如何创建并初始化项目，以及如何使用data中的数据等，敬请期待。