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

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

news 2025/7/9 4:08:21

😉 你好呀，我是爱编程的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

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/6/17 5:29:50

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/6/17 19:00:28

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/6/20 12:22:50

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/7/8 2:49:05

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/7/8 10:36:31

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/7/8 8:24:44

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/7/8 15:17:57

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2025/7/6 3:50:19

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/7/6 10:44:30

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2025/7/8 9:39:18