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

😉 你好呀,我是爱编程的Sherry,很高兴在这里遇见你!我是一名拥有十多年开发经验的前端工程师。这一路走来,面对困难时也曾感到迷茫,凭借不懈的努力和坚持,重新找到了前进的方向。我的人生格言是------认准方向,坚持不懈,你终将迎来辉煌!欢迎关注我😁,我将在这里分享工作中积累的经验和心得,希望我的分享能够给你带来帮助。

👉 关于【Vue3项目实战系列】专栏,本专栏旨在帮助新人粉丝全面快速的掌握vue3开发技术,在接下来的日子里我带着大家从零开始一个vue3项目,项目包含了框架搭建,用户登录,用户权限,表格增删改查,表单验证,等一套完整的用户管理系统的实践开发,学完可以帮助前端新人至少拥有一年工作经验,本专栏完全免费,欢迎关注并订阅!🎈

🎯如果你有任何困惑或疑问欢迎评论区给我留言哦,我收到后会第一时间为你答疑解惑😉

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

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

安装环境介绍

bash 复制代码
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

相关推荐
想取一个与众不同的名字好难20 小时前
安卓设置亮度的时候,系统会在100%与0%反复横跳
android·java·开发语言
郝学胜-神的一滴20 小时前
Qt 高级开发 025:打造优雅界面的艺术与高效重构之道
开发语言·c++·qt·程序人生·重构·软件构建·用户界面
一晌小贪欢20 小时前
第19节:地理空间分析——使用 Geopandas 绘制热力地图
开发语言·python·数据分析·pandas·数据可视化
Byte Wizard20 小时前
C语言文件操作
c语言·开发语言
zzqssliu20 小时前
Taocarts库存锁定机制优化:彻底解决跨境代购商品超卖问题
java·linux·javascript·php
scan72420 小时前
SystemMessage,HumanMessage,AIMessage,ToolMessage
开发语言·前端·javascript
rising start20 小时前
二、Vue3 核心基础:API 对比、Setup 与响应式详解
前端·javascript·vue.js
小科先生20 小时前
配置java环境变量
java·开发语言
meilindehuzi_a20 小时前
撕开 JS 的 Class 面具:从构造函数的 new 降生到顶层原型链的终极通关
开发语言·javascript·ecmascript
天天进步201520 小时前
Python全栈项目--智能远程医疗系统
开发语言·python