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>
- 运行 在终端输出命令
npm run dev
- 访问http://localhost:5173/