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

【Vue3项目实战系列一】—— 从零开始一个vue3项目 vue3+javascript+vite 非常详细 手把手教学

news 2026/2/9 7:17:11

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。
👉 关于【Vue3项目实战系列】专栏，本专栏旨在帮助新人粉丝全面快速的掌握vue3开发技术，在接下来的日子里我带着大家从零开始一个vue3项目，项目包含了框架搭建，用户登录，用户权限，表格增删改查，表单验证，等一套完整的用户管理系统的实践开发，学完可以帮助前端新人至少拥有一年工作经验，本专栏完全免费，欢迎关注并订阅！🎈
🎯如果你有任何困惑或疑问欢迎评论区给我留言哦，我收到后会第一时间为你答疑解惑😉

要学好一门技术最好的办法就是多实践，用实践去验证理论，看十遍不如去敲一遍代码，边练边理解。

学习vue最好的办法就是自己创建一个项目从头到尾去完成它，在接下来的日子里，我们将一起从零开始去开发一个vue3项目。今天我们先来搭建一下环境。

安装环境介绍

node 18+
vue3
javascript
vite

项目初始化

在这里插入图片描述

安装依赖

在这里插入图片描述
在这里插入图片描述
当出现added 242 packages in 33s 就代表依赖已经安装好了。

安装VSCode编辑器

VSCode，全称 Visual Studio Code，是由微软开发的一款免费且开源的代码编辑器。它支持多种编程语言，并通过插件系统提供了丰富的扩展功能，可以适应各种开发需求。VSCode 拥有轻量级但强大的特性，如智能代码补全（IntelliSense）、内置的Git命令、语法高亮、括号匹配、代码片段、代码重构等。

下载地址：https://code.visualstudio.com/Download
在这里插入图片描述
选择适合自己电脑的安装程序下载，下载后傻瓜式安装即可。

在VSCode中运行项目

双击打开VSCode，File=>Open Folder在这里插入图片描述
选择我们的项目打开
在这里插入图片描述
进入工作面板
在这里插入图片描述

在浏览器里输入http://localhost:5173/ 可访问下面页面
在这里插入图片描述

到这里我们的第一个vue3项目的初始化就完成了。下一篇我们讲【Vue3项目实战】—— 初始目录结构说明

参考文档：https://cn.vuejs.org/guide/quick-start.html

相关文章：

【Vue3项目实战系列一】—— 从零开始一个vue3项目 vue3+javascript+vite 非常详细 手把手教学

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是…...

编程日记 2024/12/10 10:21:38

Python_Flask04(牛马问答平台01)

项目名称：牛马问答平台 项目简介：1.主要用来给社会上的牛马们探讨老板的恶心之处。 2. 用来学习交流。 技术手段：Python3.x Flask render_template pymysql flask_sqlalchemy........ 注意该博客为迭代项目，于最后一期展示完整…...

编程日记 2024/12/10 10:20:37

Java转C之并发和多线程

提纲&#xff1a; 概念介绍与对比概述 简述Java与C在并发和多线程方面的核心区别解释C11标准、POSIX、C11 <threads.h>、Pthread等名词 Java多线程与并发回顾 线程、Runnable、ExecutorService概念说明同步关键字与工具类含义 C并发基础 没有Java式的内置线程类&#xf…...

编程日记 2024/12/10 10:17:34

针对一个系统的权限管理这样的业务场景，使用各设计模式解说

通义灵码 下面将介绍如何在Java中使用不同的设计模式来实现权限管理系统。每个设计模式都有其特定的应用场景和实现方式&#xff0c;我们将逐一讲解。 1. 单例模式 (Singleton Pattern) 应用场景&#xff1a;确保权限管理服务在整个系统中只有一个实例&#xff0c;避免重复创…...

编程日记 2024/12/10 10:16:33

Android AppCompatImageView View.Gone状态切换到View.VISIBLE重新layout，Kotlin

Android AppCompatImageView View.Gone状态切换到View.VISIBLE重新layout&#xff0c;Kotlin import android.content.Context import android.util.AttributeSet import android.util.Log import androidx.appcompat.widget.AppCompatImageViewclass MyImageView : AppCompatI…...

编程日记 2024/12/10 10:15:32

在云上轻松部署达梦数据库

达梦数据库&#xff08;DM Database&#xff09;是由达梦数据库有限公司开发的一款关系型数据库管理系统&#xff08;RDBMS&#xff09;。作为国内领先的数据库产品&#xff0c;达梦数据库在政府、金融、能源、电信、交通、医疗、教育等多个行业得到广泛应用&#xff0c;尤其在…...

编程日记 2024/12/10 10:14:30

什么是厄尔米特（Hermitian）矩阵？

厄米矩阵&#xff08;Hermitian Matrix&#xff09;定义 在数学和物理中&#xff0c;厄米矩阵是满足以下条件的复方阵&#xff1a; A A † \mathbf{A}\mathbf{A}^\dagger AA† 其中&#xff0c; A † \mathbf{A}^\dagger A†表示矩阵 A \mathbf{A} A的共轭转置&#xff0c;即…...

编程日记 2024/12/10 10:13:28

React - useActionState、useFormStatus与表单处理

参考文档&#xff1a;react18.3.1官方文档 一些概念&#xff1a; React 的 Canary 和 Experimental 频道是 React 团队用于发布和测试新功能的渠道。 useActionState useActionState 是一个可以根据某个表单动作的结果更新 state 的 Hook。 const [state, formAction, isPe…...

编程日记 2024/12/10 10:12:27

v3账号密码登录随机图片验证码

安装插件 pnpm i identify --save图形验证码组件 <template><div class"s-canvas"><!-- 图形验证码的宽和高都来自于父组件的传值&#xff0c;若父组件没有传值&#xff0c;那么就按当前子组件的默认值进行渲染 --><canvas id"s-canvas&…...

编程日记 2024/12/10 10:11:25

不只是请求和响应：使用Fiddler解读Cookie与状态码全指南（下）

欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持! 不只是请求和响应&#xff1a;使用Fiddler抓包HTTP协议全指南(上)_fiddler 获取响应脚本-CSDN博客https://blog.csdn.net/Chunfeng6yugan/article/details/144005872?spm1001.2014.3001.5501 不只是请求和响…...

编程日记 2024/12/10 10:10:24

java+springboot+mysql游乐园管理系统

项目介绍&#xff1a; 使用javaspringbootmysql开发的游乐园管理系统&#xff0c;系统包含管理员、员工、用户角色&#xff0c;功能如下&#xff1a; 管理员&#xff1a;登录后台&#xff1b;首页数据统计&#xff1b;员工管理&#xff1b;用户管理&#xff1b;游乐项目管理&…...

编程日记 2024/12/10 10:09:23

@RequestBody，getparameter，@RequestParam，@PathVariable之间的区别和联系

RequestBody、RequestParam、PathVariable和getParameter&#xff08;你提到的可能是Java Servlet API中的方法&#xff09;是用于处理HTTP请求参数的不同机制。它们各自有不同的用途和适用场景&#xff0c;下面将详细解释它们之间的区别和联系。 1. RequestBody 用途&#xf…...

编程日记 2024/12/10 10:07:20

Linx下自动化之路：Redis安装包一键安装脚本实现无网极速部署并注册成服务

目录 简介 安装包下载 安装脚本 服务常用命令 简介 通过一键安装脚本实现 Redis 安装包的无网极速部署&#xff0c;并将其成功注册为系统服务&#xff0c;开机自启。 安装包下载 redis-7.0.8.tar.gzhttp://download.redis.io/releases/redis-7.0.8.tar.gz 安装脚本 修…...

编程日记 2024/12/10 10:06:19

VMware虚拟机搭建和镜像配置

VMware虚拟机搭建和镜像配置 下载安装VMware 开始下载 更改安装路径&#xff0c;需要一个大空间的盘 更改后下一步 下一步后&#xff0c;选择不主动升级更新 一直下一步 直到安装完毕 输入许可密钥&#xff0c;我下载的版本是12&#xff0c;输入完成点击输入&#xff…...

编程日记 2024/12/10 10:04:16

红日靶场vulnstark 4靶机的测试报告[细节]（一）

目录 一、测试环境 1、系统环境 2、注意事项 3、使用工具/软件 二、测试目的 三、操作过程 1、信息搜集 2、漏洞利用Getshell ①Struts 2 s2-045漏洞 手工利用s2-45漏洞 Msf综合利用 ②Tomcat框架(CVE-2017-12615) ③phpMyAdmin(CVE-2018-12613) 构造语句写入冰蝎木…...

编程日记 2024/12/10 10:01:11

深入详解人工智能机器学习常见算法——线性回归算法

深入解析线性回归算法 线性回归是机器学习和统计学中最基本、最常用的预测建模技术之一。它通过线性关系描述因变量与一个或多个自变量之间的联系&#xff0c;帮助我们进行数据建模和预测。本篇文章将详细介绍线性回归的基础知识、算法原理、核心概念、实现方法以及其在实际问题…...

编程日记 2024/12/10 10:00:10

Python 开发环境搭建

Python 开发环境搭建 flyfish 版本 Ubuntu 22.04.5 LTS PyTorch 2.5.1 cuda 12.4 python 3.12.7安装 Anaconda3 依赖 sudo apt-get install libgl1-mesa-glx libegl1-mesa libxrandr2 libxrandr2 libxss1 libxcursor1 libxcomposite1 libasound2 libxi6 libxtst6安装命令 …...

编程日记 2024/12/10 9:59:08

OpenCV相机标定与3D重建(9)相机标定函数calibrateCameraRO()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::calibrateCameraRO 是 OpenCV 中用于相机标定的函数&#xff0c;它允许固定某些点来进行更精确的标定。 函数原型 double cv::calibrateCa…...

编程日记 2024/12/10 9:58:06

flink终止提交给yarn的任务

接上文&#xff1a;一文说清flink从编码到部署上线 1.查看正在执行的flink 访问地址&#xff08;参考&#xff09;&#xff1a;http://10.86.97.191:8099/cluster/apps 2.终止任务 yarn application -kill appID 本文为&#xff1a; yarn application -kill application_17…...

编程日记 2024/12/10 9:57:04

算法刷题Day14:BM36 判断是不是平衡二叉树

题目链接 描述 输入一棵节点数为 n 二叉树&#xff0c;判断该二叉树是否是平衡二叉树。 在这里&#xff0c;我们只需要考虑其平衡性&#xff0c;不需要考虑其是不是排序二叉树 平衡二叉树&#xff08;Balanced Binary Tree&#xff09;&#xff0c;具有以下性质&#xff1a;它是…...

编程日记 2024/12/10 9:55:01

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2026/2/1 20:49:03

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/1/30 20:05:06

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/2/5 8:19:14

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/28 9:04:29

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2026/1/30 2:34:31

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

编程新知 2026/1/27 17:00:20

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...

编程新知 2025/10/5 19:22:12