当前位置：首页 > article >正文

初识vue3（vue简介，环境配置，setup语法糖）

article 2025/6/6 11:01:29

一，前言

今天学习vue3

二，vue简介及如何创建vue工程

Vue 3 简介

Vue.js（读音 /vjuː/，类似 “view”）是一款流行的渐进式 JavaScript 框架，用于构建用户界面。Vue 3 是其第三代主要版本，于 2020 年 9 月正式发布，在性能、灵活性和可维护性方面进行了全面升级，成为现代前端开发的热门选择之一。

如何创建vue工程

首先需要安装一下node.js直接在官网或者中文网都可以安装，按照指示安装即可。

然后我们就可以打开命令提示符，然后输出node来确认是否安装成功如果显示的是

Welcome to Node.js v22.16.0.

说明安装成功。然后我们就可以创建项目了。

还是打开我们的命令提示符。输入下面这行代码就可以开始创建。我们这里使用Vite创建项目。这也是官方推荐的。

我们可以从它的官方文档中获取这些信息，中文官方文档

npm create vite@latest my-vue-project

里面都有这些信息。

创建完成后，进入项目目录并安装依赖：

cd my-vue-project
npm install

项目创建并安装依赖后，可以启动开发服务器：

npm run dev

然后就好了

然后输入完之后回车就创建好了，在VScode中打开就可以了，他会提示你安装插件直接安装即可。

Vue 项目的基本结构通常包括：

src/ - 源代码目录

App.vue - 主组件（根）
main.js/main.ts - 入口文件
components/ - 组件目录
views/ - 视图页面目录
router/ - 路由配置
store/ - Vuex 状态管理
public/ - 静态资源目录
package.json - 项目依赖和脚本配置
vite.config.js/vue.config.js - 构建配置

选择适合的项目模板

创建项目时，你可以根据需求选择不同的模板：

vue - 基础 Vue 3 项目
vue-ts - Vue 3 + TypeScript 项目

在这里插入图片描述

三，OptionsAPI与CompositionAPI

在 Vue 框架里，Options API（选项式 API ）和 Composition API（组合式 API ）是编写组件的两种主要方式，区别如下：

定义与代码风格

Options API：在 Vue 2 及之前版本广泛使用。它将组件的不同部分（如数据、方法、计算属性、生命周期钩子等）划分到不同选项中，以对象属性形式呈现。
Composition API：Vue 3 引入的新特性。基于函数来组织代码，通过 setup 函数将相关逻辑（数据、方法等）封装在独立函数（组合函数或 Composables ）中。

简而言之，言而总之，Options API就是把一个功能的不同部分分开存放。CompositionAPI就是用函数把一个功能整体放到一起。

总体而言，Options API 简单直观，适合初学者和小型项目；Composition API 在大型复杂项目中，在逻辑复用、代码组织和维护等方面优势明显。实际开发可根据项目需求和团队偏好选择。

四，setup函数

Vue 3 的 Composition API 引入了 setup 函数，这是一个全新的组件选项，用于在组件实例初始化之前组合响应式数据和方法。

基本用法

setup（）{
//里面可以填数据，方法。
let name = 'zhangsan'
let age = 18   //此时的age和name不是响应式的后面在学如何改成响应式的。
funtion changename（）{
age += 1
console.log(age)
}
return{name,age,changename}
}

vue3中setup函数中不可以使用this，setup函数中的this是undefined,Vue3中已经弱化this了。

setup语法糖

其实就是把setup放到script里面例如：

<script lang="ts">
export default {name:'person',
}
</script>
<script lang="ts" setup>
let name = '张三';
let age = 18;
let address = '北京';function changeName(){name = '李四';
}
function changeAge(){age = 20;
}
function showTel(){address = '上海';
}return {name,age,address,changeName,changeAge,showTel}</script>

同样我们还有一种写法是

<script lang="ts" setup name：'person'>

如果你先要让组件名和这个里面的名字不一样的话可以下载一个插件在终端里面输入。

 npm i vite-plugin-vue-setup-extend -D

然后打开Vite.config.ts这个文件

将刚才下载的插件引入进去，然后再在插件里面调用一下这个就是在plugins中。然后就可以了