vue3简介以及创建第一个vue3工程

最新推荐文章于 2025-05-29 09:32:27 发布

设计师小聂！

最新推荐文章于 2025-05-29 09:32:27 发布

阅读量1.2k

点赞数 25

文章标签： html5 css 前端框架 vue.js

本文链接：https://blog.csdn.net/qq_62374596/article/details/148255167

版权

vue3简介以及创建第一个vue3工程

vue3简介

背景：Vue 2 自发布以来，已经被广泛应用于各种项目中，但随着前端开发的发展，社区对性能、可扩展性和新特性提出了更高要求。Vue 3 是对 Vue 2 的全面升级，旨在解决这些问题。
目标：性能提升：通过底层架构的优化，显著提高应用的性能。
更好的可扩展性：支持大型应用的开发。
新特性支持：引入了 Composition API 等新特性，提升开发体验。
响应性系统重构：Vue 3 使用了 Proxy API 替代 Vue 2 的 Object.defineProperty，大幅提升了响应性系统的性能。
渲染器优化：通过更高效的渲染器算法，减少了不必要的 DOM 操作。
更小的体积：Vue 3 的核心库体积更小，加载速度更快。
深度集成：Vue 3 在设计时就考虑了与 TypeScript 的兼容性，提供了更好的类型推导和类型检查。
支持多个根节点：Vue 3 允许组件返回多个根节点，而 Vue 2 只能有一个根节点。

创建vue3工程(基于 vite 创建)

首先要下载node.js
否则没有npm命令
node.js下载地址: https://nodejs.org/zh-cn/download

在命令行里面输入 npm create vue@latest
输入项目名称 first_vue3

是否添加TypeScript支持
TypeScript? Yes
是否添加JSX支持
JSX支持 No
是否添加路由环境
Router (单页面应用开发) No
是否添加pinia环境
Pinia(状态管理) No
是否添加单元测试
Vitest(单元测试) No
是否添加端到端测试方案
端到端测试 No
是否添加ESLint语法检查
ESLint(错误预防) Yes
是否添加Prettiert代码格式化
Prettier No
在这里插入图片描述

用vocode打开项目
在终端输入npm i 下载项目所需要的依赖
每个文件的作用

.vscode 文件夹：
用于存放 Visual Studio Code 编辑器的配置文件。
包含项目的特定设置，如代码格式化、扩展配置等。
extensions.json：
列出了项目中推荐安装的 VS Code 扩展。
可以帮助团队成员快速配置相同的开发环境。
settings.json：
包含项目的 VS Code 设置。
可以覆盖默认设置，例如代码格式化规则、文件关联等。
public 文件夹：
存放公共静态资源，如图片、字体等。
这些资源在构建时会被复制到输出目录。
src 文件夹：
存放项目的源代码。
包括组件、样式、脚本等。
.gitignore：
列出应被 Git 忽略的文件和文件夹。
防止不必要的文件被提交到版本控制中。
index.html：
项目的入口 HTML 文件。
通常包含基本的 HTML 结构和对 JavaScript 文件的引用。
package.json：
包含项目的元数据和依赖信息。
定义了项目的依赖包、脚本任务等。
README.md：
项目的说明文档。
通常包含项目简介、安装和使用说明等。
tsconfig.json：
TypeScript 编译器的配置文件。
定义了编译选项，如目标语言版本、模块系统等。
env.d.ts：
定义环境变量的类型声明文件。
确保环境变量的类型安全。
tsconfig.app.json：
应用程序特定的 TypeScript 配置。
可能包含特定的编译选项或路径别名。
tsconfig.node.json：
针对 Node.js 环境的 TypeScript 配置。
定义 Node.js 特定的编译选项。
vite.config.ts：
Vite 的配置文件。
定义项目的构建、开发服务器等配置。

编写App组件

// 导入 Vue 的 createApp 方法，用于创建 Vue 应用
import { createApp } from "vue";

// 导入本地的 App 组件，这是应用的根组件
import App from "./App.vue";

// 使用 createApp 方法创建一个 Vue 应用，并传入根组件 App
// 然后调用 mount 方法，将应用挂载到页面中 id 为 'app' 的 DOM 元素上
createApp(App).mount('#app');

<template>
    <div class="app">
       <h1>第一个vue3项目</h1> 
    </div>
</template>

<script lang="ts">
export default{
    name:'App'//组件名
}
</script>

<style>
    .app{
        background-color: aqua;
        box-shadow: 0 0 10px;
        padding: 20px;
        border-radius: 10px;
    }
</style>