【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)无需特…...
小白也能懂:雪女-斗罗大陆-造相Z-Turbo文生图模型使用详解
小白也能懂:雪女-斗罗大陆-造相Z-Turbo文生图模型使用详解 1. 模型介绍 1.1 什么是雪女-斗罗大陆-造相Z-Turbo 雪女-斗罗大陆-造相Z-Turbo是一款专门用于生成《斗罗大陆》风格图片的AI模型,特别擅长创作与"雪女"角色相关的精美图像。这个模…...
基于凌科芯安加密芯片智能门锁解决方案
随着物联网产业的快速发展,智能网络设备对信息安全的需求与依赖日益增强。在万物互联的背景下,电子锁作为典型的安全防范产品,在重点场所安防与居民居家安全保障中发挥着关键作用。其中,智能门锁凭借密码、指纹、人脸识别、手机远…...
Python自动化测试框架入门教程
Python自动化测试框架入门教程:从零开始掌握Pytest和unittest 📝 摘要 自动化测试是现代软件开发不可或缺的一部分,能够显著提高代码质量和开发效率。本文将带你从零开始了解Python主流自动化测试框架——Pytest和unittest,包含…...
Istio Gateway+VirtualService配置不生效?Java服务流量劫持失败的6大隐性原因深度诊断
第一章:Istio GatewayVirtualService配置不生效?Java服务流量劫持失败的6大隐性原因深度诊断Istio 的 Gateway 与 VirtualService 是实现南北向流量治理的核心资源,但 Java 应用在启用 Istio Sidecar 注入后,常出现请求未被 Envoy…...
三菱现代自动擦窗机器人PLC软件:后发产品介绍及技术细节
三菱 现代自动擦窗机器人PLC软件 我们主要的后发送的产品有,带解释的梯形图接线图原理图图纸,io分配,组态画面 界面多种组态可供选择上周刚帮一个三菱现代贴牌擦窗机的小客户把新软件迭代完,顺便攒了一套带人话解释的梯形图、不…...
Shell编程避坑指南:为什么你的while循环总出问题?7个常见错误排查
Shell编程避坑指南:为什么你的while循环总出问题?7个常见错误排查 在Shell脚本开发中,while循环是处理未知迭代次数的利器,但也是错误的高发区。很多开发者在使用while时经常遇到脚本卡死、逻辑异常或结果不符合预期等问题。本文将…...
OpenClaw Exec Approvals 机制:在安全与效率之间寻找平衡
OpenClaw Exec Approvals 机制:在安全与效率之间寻找平衡当你第一次看到 /approve 弹窗时,是选择 allow-once 还是 allow-always?这个看似简单的决定,背后是安全与便利的永恒博弈。引言 在 Agent 开发和工作流自动化的世界里&…...
导入MotorCAD API(需先安装MotorCAD的Python接口)
基于Motorcad的4极6槽 内转子采用内插式磁钢 3000rpm 输出转矩 2.6Nm 效率93%外径 94mm 轴向长度70mm 功率800w 直流母线380V 永磁同步电机(永磁直流无刷)模型(PMSM或者是BLDC) 最近捣鼓了个小功率PMSM模型,用MotorCAD搭了个4极6槽内插式的&a…...
BiliTools:B站资源高效管理与下载完全指南
BiliTools:B站资源高效管理与下载完全指南 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱,支持下载视频、番剧等等各类资源 项目地址: https://gitcode.com/GitHub_Trending/bilit/BiliTools BiliTools是一…...
AI开发AI:借助快马多模型能力,迭代式构建你的智能健康管理Agent
最近在尝试开发一个健康管理AI助手,发现用传统方式写代码调试特别耗时。后来尝试了InsCode(快马)平台,发现用AI对话的方式迭代开发简直打开了新世界。记录下这个"用AI开发AI"的完整过程: 基础框架搭建 最开始只需要一个能交互的对话…...

