【Vue3 入门到实战】1. 创建Vue3工程
目录
编辑
1. 学习目标
2. 环境准备与初始化
3. 项目文件结构
4. 写一个简单的效果
5. 总结
1. 学习目标
(1) 掌握如何创建vue3项目。
(2) 了解项目中的文件的作用。
(3) 编辑App.vue文件,并写一个简单的效果。
2. 环境准备与初始化
(1) 安装 Node.js 和 npm
为了方便管理,我们直接安装 nvm 来管理Node.js的不同版本,点击下方链接查看如何安装 nvm 当然,如果你已经安装了node.js,也可以跳过此步骤。
nvm-下载、安装、使用(2024/09/03更新)-CSDN博客
(2) 使用 Vite 构建工具创建项目
为什么不使用 cli 呢,原因如下
vite 是新一代前端构建工具,与cli相比,具有很多优势。
<1> 轻量快速的热重载,能实现急速的服务启动。
<2> 对TypeScript、JSX、css 等支持开箱即用。
<3> 真正的按需编译,不再等待整个应用编译完成。
构建命令
## 1.创建命令
npm create vue@latest## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript? Yes
## 是否添加JSX支持
√ Add JSX Support? No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
√ Add Pinia for state management? No
## 是否添加单元测试
√ Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting? No
初始化启动
## 初始化
npm install## 启动
npm run dev
启动成功
3. 项目文件结构
创建好的vue3项目结构如图所示。

各个文件的作用我放在了下面的表格中。
| extensions.json | 项目开发过程中推荐使用的 VS Code 扩展 |
| settings.json | (VS Code) 的核心配置文件之一,用于定义编辑器的行为、界面设置 |
| /node_modules | 存放项目依赖的所有第三方库和模块 |
| /public | 存放不会被 Webpack 或其他构建工具处理的静态资源 |
| /src | Vue.js 项目的核心部分,包含了项目的源代码和主要逻辑 |
| main.ts | 它负责创建 Vue 应用实例、配置全局插件和服务,并将应用挂载到 DOM 中 |
| App.vue | Vue 3 项目中的根组件,它是整个应用的起点和容器 |
| package.json | 定义了项目的元数据、依赖项、脚本命令以及其他配置信息。 |
| env.d.ts | 用于定义全局类型声明,确保 TypeScript 编译器能够正确理解环境变量和其他全局对象。 |
| vite.config.ts | Vite 构建工具的核心配置文件,可以配置插件、优化构建过程、设置别名、定义服务器选项等 |
4. 写一个简单的效果
(1) 在 /src/components 目录下创建一个组件 Person.vue。
Person.vue
<template><div class="person"><h3>我是Person组件</h3><h2>姓名:{{ name }}</h2><h2>年龄:{{ age }}</h2><button v-on:click="changeName">修改名字</button><button v-on:click="changeAge">修改年龄</button><button v-on:click="showTel">查看联系方式</button></div>
</template><script lang="ts">
export default {name: 'Person',data() {return {name: '张三',age: 18,tel:'88888'}},methods:{changeName(){this.name = '李四'},changeAge(){this.age += 1;},showTel(){alert(this.tel)}}
}
</script><style>.person {background: blue;padding: 20px;}button{margin: 0 5px;}
</style>
(2) 在 App.vue 文件中引入 Person.vue 组件
App.vue
<template><div class="app"><h2>你好呀</h2><Person></Person></div>
</template><script lang="ts">
import Person from './components/Person.vue'
export default {name: 'App', components: {Person}
}
</script><style>
.app{background: wheat;padding: 20px;
}
</style>
效果如下
5. 总结
在过去的接触中,我积累了关于 Vue 3 的一些零散知识点。为了更深入和系统地学习 Vue 3,我决定跟随视频教程和官方文档进行一次全面的学习,并在此过程中记录下我的学习笔记。
本文将详细讲解如何从头开始创建一个 Vue 3 工程。这不仅是构建任何 Vue 应用的第一步,也是理解框架工作原理的重要起点。随着后续的学习,我将继续撰写系列文章,涵盖更多主题和技术细节。如果对你有帮助,不妨点赞、关注+收藏防止不迷路😀。
学习视频 ↓ ↓ ↓
【尚硅谷Vue3入门到实战,最新版vue3+TypeScript前端开发教程】
相关文章:
【Vue3 入门到实战】1. 创建Vue3工程
目录 编辑 1. 学习目标 2. 环境准备与初始化 3. 项目文件结构 4. 写一个简单的效果 5. 总结 1. 学习目标 (1) 掌握如何创建vue3项目。 (2) 了解项目中的文件的作用。 (3) 编辑App.vue文件,并写一个简单的效果。 2. 环境准备与初始化 (1) 安装 Node.js 和 …...
rtthread学习笔记系列(10/11) -- 系统定时器
文章目录 10. 系统定时器10.1 跳跃表[定时器跳表 (Skip List) 算法](https://www.rt-thread.org/document/site/#/rt-thread-version/rt-thread-standard/programming-manual/timer/timer?id定时器跳表-skip-list-算法) 10.2 硬件定时器10.2.1 初始化&&删除10.2.2 sta…...
mock服务-通过json定义接口自动实现mock服务
go-mock介绍 不管在前端还是后端开发过程中,当我们需要联调其他服务的接口,而这个服务还没法提供调用时,那我们就要用到mock服务,自己按接口文档定义一个临时接口返回指定数据,以供本地开发联调测试。 怎么快速启动一…...
像JSONDecodeError: Extra data: line 2 column 1 (char 134)这样的问题怎么解决
问题介绍 今天处理返回的 JSON 的时候,出现了下面这样的问题: 处理这种问题的时候,首先你要看一下当前的字符串格式是啥样的,比如我查看后发现是下面这样的: 会发现这个字符串中间没有逗号,也就是此时的J…...
C#版 软件开发6大原则与23种设计模式
开发原则和设计模式一直是软件开发中的圣经, 但是这仅仅适用于中大型的项目开发, 在小型项目的开发中, 这些规则会降低你的开发效率, 使你的工程变得繁杂. 所以只有适合你的才是最好的. 设计模式六大原则1. 单一职责原则(Single Responsibility Principle࿰…...
java8 springboot 集成javaFx 实现一个客户端程序
1. 先创建一个springboot 程序(此步骤不做流程展示) 2. 更改springboot的版本依赖和导入所需依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.7</versio…...
MySQL(高级特性篇) 06 章——索引的数据结构
一、为什么使用索引 索引是存储引擎用于快速找到数据记录的一种数据结构,就好比一本教科书的目录部分,通过目录找到对应文章的页码,便可快速定位到需要的文章。MySQL中也是一样的道理,进行数据查找时,首先查看查询条件…...
PanWeidb-使用BenchmarkSQL对磐维数据库进行压测
本文提供PanweiDb使用BenchmarkSQL进行性能测试的方法和测试数据报告。 BenchmarkSQL,一个JDBC基准测试工具,内嵌了TPC-C测试脚本,支持很多数据库,如PostgreSQL、Oracle和Mysql等。 TPC-C是专门针对联机交易处理系统(OLTP系统)的规范,一般情况下我们也把这类系统称为业…...
AR 在高校实验室安全教育中的应用
AR应用APP可以内置实验室安全功能介绍,学习并考试(为满足教育部关于实验室人员准入条件),AR主模块。其中AR主模块应该包括图形标识码的扫描,生成相应模型,或者火灾、逃生等应急处置的路线及动画演示。考试采…...
微信小程序实现个人中心页面
文章目录 1. 官方文档教程2. 编写静态页面3. 关于作者其它项目视频教程介绍 1. 官方文档教程 https://developers.weixin.qq.com/miniprogram/dev/framework/ 2. 编写静态页面 mine.wxml布局文件 <!--index.wxml--> <navigation-bar title"个人中心" ba…...
Spring Boot中的配置文件有哪些类型
在 Spring Boot 中,配置文件用于管理应用程序的设置和参数,通常存放在项目的 src/main/resources 目录下。Spring Boot 支持多种类型的配置文件,并通过这些文件来控制应用的行为和环境配置。 1. application.properties application.proper…...
Spring Boot 项目启动后自动加载系统配置的多种实现方式
Spring Boot 项目启动后自动加载系统配置的多种实现方式 在 Spring Boot 项目中,可以通过以下几种方式实现 在项目启动完成后自动加载系统配置缓存操作 的需求: 1. 使用 CommandLineRunner CommandLineRunner 是一个接口,可以用来在 Spring…...
如何在 CentOS 中生成 CSR
在本教程中,我们将向您展示如何在CentOS 7和6中生成CSR。您可以直接从服务器生成 CSR。 只需按照以下步骤操作: 第 1 步:使用安全外壳 (SSH) 登录您的服务器 步骤 2:创建私钥和 CSR 文件 在提示符处键入以…...
qml XmlListModel详解
1、概述 XmlListModel是QtQuick用于从XML数据创建只读模型的组件。它可以作为各种view元素的数据源,比如ListView、GridView、PathView等;也可以作为其他和model交互的元素的数据源。通过XmlRole定义角色,如name、age和height,并…...
C++并发编程之跨应用程序与驱动程序的单生产者单消费者队列
设计一个单生产者单消费者队列(SPSC队列),不使用C STL库或操作系统原子操作函数,并且将其放入跨进程共享内存中以便在Ring3(用户模式)和Ring0(内核模式)之间传递数据,是一…...
PostgreSQL技术内幕22:vacuum full 和 vacuum
文章目录 0.简介1.概念及使用方式2.工作原理2.1 主要功能2.2 清理流程2.3 防止事务id环绕说明 3.使用建议 0.简介 在之前介绍MVCC文章中介绍过常见的MVCC实现的两种方式,一种是将旧数据放到回滚段,一种是直接生成一条新数据(对于删除是不删除…...
【网络】:网络编程套接字
目录 源IP地址和目的IP地址 源MAC地址和目的MAC地址 源端口号和目的端口号 端口号 VS 进程ID TCP协议和UDP协议 网络字节序 字符串IP和整数IP相互转换 查看当前网络的状态 socket编程接口 socket常见API 创建套接字(socket) 绑定端口号&…...
java基础概念55-不可变集合
一、定义 不可变集合:不可以被修改的集合,只能查询。(长度、内容均不可被修改) 二、创建不可变集合 【注意】: 此方法是在JDK9中引入的。 2-1、list不可变集合 示例: import java.util.List;public cla…...
深入理解 C++ 函数重载
在 C 中, 函数重载是一个非常强大的特性, 允许多个函数使用相同的名称, 但具有不同的参数类型. 重载解析决定了在给定的调用中, 编译器应选择哪个版本的重载函数. 本文将深入探讨 C 重载解析的工作原理, 帮助你在实际编程中更好地理解这一机制. 重载(Overload) vs 重写(Overri…...
相机和激光雷达的外参标定 - 无标定板版本
1. 实现的效果 通过本软件实现求解相机和LiDAR的外参,即2个传感器之间的三维平移[x, y, z]和三维旋转[roll, pitch, yaw]。完成标定后,可将点云投影到图像,效果图如下: 本软件的优势:(1)无需特…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

