【Vue】搭建第一个vue3+vite前段项目

不要奇怪我为啥突然开始写前端的文章,唉,一切都是公司的任务罢了。

其实这周学习了前端和coverity,但是后者就算学了我也不能写在我博客里,所以还是写一写前端吧。

node.js 和 npm

npm是一个类似于 maven 的包管理器。

去以下地址下载 node.js:
https://nodejs.org/en

当然如果你访问费劲,可以访问这个中文网 https://nodejs.cn/,最新的 LTS 版本是 20.12.0.

安装后可以检查下 node.js 和 npm 的版本。

PS D:\Codes\CPP\VSCodeProjects\2024\March\vueProjectHello> node -v
v20.11.1
PS D:\Codes\CPP\VSCodeProjects\2024\March\vueProjectHello> npm -v
10.2.4

创建第一个项目

应该说,其实我对 Vue 之前的印象只是一个高级版的 JavaScript,但是现在的 Vue 确实很离谱。

在任何你想创建项目的地方打开终端输入:

npm create vue@latest

会自动要求你选择一些设置,我按个人喜好选择了以下的部分:
我的选择
执行:

npm install

我以前是学 Springboot 的,这个命令类似于 Maven 的 build,将 package.json 中的包都下载到了本地项目目录中。

执行:

npm run dev

可以直接启动项目。
项目起始页

推送到 gitee

我的新电脑毕竟不是我的开发机,而我需要保证这个项目在我的新电脑和旧电脑都可以使用,还是推到远程方便一点。

初始化一个 Git 仓库:

git init

配置用户名和邮箱(不建议按官方配置用 global,尤其是你电脑有多个 git 用户的情况):

PS D:\Codes\CPP\VSCodeProjects\2024\March\vueProject\sunrainWebsite> git config --local user.name "用户名" 
PS D:\Codes\CPP\VSCodeProjects\2024\March\vueProject\sunrainWebsite> git config --local user.email "邮箱" 

检查配置是否生效,可以看看 .git 目录下的 config 文件。如果你的 VS Code 没有显示项目目录下的 git 文件夹,可以在设置里把排除开关关掉:
排除
在 gitee 上建立一个空仓库,然后设置此仓库为项目的远程仓库:

git remote add origin https://gitee.com/bluebonnet27/sunrain-website.git

然后 add、commit、push 就可以了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506417.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

55 npm run serve 和 npm run build 的分包策略

前言 这里我们来看一下 vue 这边 打包的时候的一些 拆分包的一些策略 我们经常会使用到 npm run build 进行服务的打包 然后 打包出来的情况, 可能如下, 可以看到 chunk-vendors 是进行了包的拆分, 我们这里就是 来看一下 这里 npm run build 的时候的, 一个分包的策略 测试…

【Leetcode每日一题】模拟 - 提莫攻击(难度⭐)(45)

1. 题目解析 题目链接:495. 提莫攻击 2.算法原理 一、分情况讨论 要计算中毒的总时长,我们需要考虑时间点之间的差值,并根据这些差值来确定中毒的实际持续时间。 情况一:差值大于等于中毒时间 假设你的角色在时间点A中毒&#…

C语言 | Leetcode C语言题解之两数相加

题目: 题解: struct ListNode* addTwoNumbers(struct ListNode* l1, struct ListNode* l2) {struct ListNode *head NULL, *tail NULL;int carry 0;while (l1 || l2) {int n1 l1 ? l1->val : 0;int n2 l2 ? l2->val : 0;int sum n1 n2 …

C#(winform) 调用MATLAB函数

测试环境 VisualStudio2022 / .NET Framework 4.7.2 Matlab2021b 参考:C# Matlab 相互调用 Matlab 1、编写Matlab函数 可以没有任何参数单纯定义matlab处理的函数,输出的数据都存在TXT中用以后期读取数据 function [result,m,n] TEST(list) % 计算…

上海亚商投顾:沪指低开高走 5.5G概念股午后走强

上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 一.市场情绪 沪指3月 29日震荡反弹,尾盘涨幅扩大至1%,深成指、创业板指跟随上扬。周期股再度走强&a…

基于SpringBoot+Vue企业级工位管理系统(源码+部署说明+演示视频+源码介绍+lw)

您好,我是码农飞哥(wei158556),感谢您阅读本文,欢迎一键三连哦。💪🏻 1. Python基础专栏,基础知识一网打尽,9.9元买不了吃亏,买不了上当。 Python从入门到精通…

Modbus取数测试程序

modbus协议,modbus-tcp协议取数测试程序 Java实现modbus-tcp协议取数操作,数据类型转换操作

list(链表)容器(一)

一、list基本概念 链表(list)是一种物理存储单元上非连续的存储结构,数据元素的逻辑顺序是通过链表中的指针链接实现的 链表的组成:链表由一系列结点组成 结点的组成:一个是存储数据元素的数据域&#xff0…

Mac OS上使用matplotlib库显示中文字体

文章目录 问题描述解决步骤参考文章 问题描述 如果我们想要使用matplotlib画图的话,可能会出现下面的这种warning: UserWarning: Glyph 24212 (\N{CJK UNIFIED IDEOGRAPH-5E94}) missing from current font.解决步骤 解决这个问题,可以按照下面的做法…

【Leetcode】331. 验证二叉树的前序序列化

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接🔗 序列化二叉树的一种方法是使用 前序遍历 。当我们遇到一个非空节点时,我们可以记录下这个节点的值。如果它是一个空节点,我们可以使用一个标记值记录&#x…

Tidb和MySQL性能简单测试对比

一、单SQL性能对比 由于TiDB的并发能力优秀,但是单个SQL执行延迟较差,为了客观对比,所以只用1个线程来压测tidb和mysql,以观察延迟情况 二、并发SQL性能对比 TiDB:v6.5.2 MySQL:8.0.26 (单机) 三、结论 …

构建安全高效的用户登录系统:登录流程设计与Token验证详解

在当今数字化时代,用户登录系统是几乎所有在线服务的基础。然而,随着网络安全威胁的不断增加,设计一个安全可靠的登录系统变得至关重要。本文将深入探讨用户登录流程的设计原则以及Token验证的实现方式,带您了解如何构建安全高效的…

【MySQL笔记】行转列+列转行+行转列为什么用SUM()

文章目录 行转列思路实现行转列为什么要用SUM等聚合函数 列转行思路回顾下Union 实现列转行 Reference 行转列 思路 GROUP BY聚合函数 实现行转列 SELECT product_id,SUM(IF(store store1, price, NULL)) AS store1,SUM(IF(store store2, price, NULL)) AS store2,SUM(IF(…

Vulnhub:BROKEN: GALLERY

目录 信息收集 1、arp 2、nmap 3、nikto 4、whatweb WEB wen信息收集 目录扫描 进制转换 ssh登录 提权 信息收集 1、arp ┌──(root㉿ru)-[~/kali/vulnhub] └─# arp-scan -l Interface: eth0, type: EN10MB, M…

上位机图像处理和嵌入式模块部署(qmacvisual形状匹配)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 在qmacvisual软件当中,提供了两种模板匹配的方法。除了前面介绍的灰度匹配,就是今天讲的形状匹配。当然,对于使…

AI如何影响装饰器模式与组合模式的选择与应用

​🌈 个人主页:danci_ 🔥 系列专栏:《设计模式》《MYSQL应用》 💪🏻 制定明确可量化的目标,坚持默默的做事。 🚀 转载自热榜文章:设计模式深度解析:AI如何影响…

【动手学深度学习】深入浅出深度学习之利用神经网络识别螺旋状数据集

目录 🌞一、实验目的 🌞二、实验准备 🌞三、实验内容 🌼1. 生成螺旋状数据集 🌼2. 打印数据集 🌼3. 编程实现 🌻仿射层-Affine类 🌻传播层-Sigmoid类 🌻损失函数…

[数据结构初阶]堆的应用

各位读者老爷好,鼠鼠又来了捏!鼠鼠上一篇博客介绍的堆,那么今天来浅谈以下堆的应用,那么好,我们先来看两个问题: 1.如果有一组乱序的数组数据,希望你将这组数组的数据排成升序或降序&#xff0c…

【Spring MVC】快速学习使用Spring MVC的注解及三层架构

💓 博客主页:从零开始的-CodeNinja之路 ⏩ 收录文章:【Spring MVC】快速学习使用Spring MVC的注解及三层架构 🎉欢迎大家点赞👍评论📝收藏⭐文章 目录 Spring Web MVC一: 什么是Spring Web MVC&#xff1…

大促销活动时期如何做好DDoS防护?

每一次活动大促带来的迅猛流量,对技术人而言都是一次严峻考验。如果在活动期间遭受黑产恶意DDoS攻击,无疑是雪上加霜。电商的特性是业务常态下通常不会遭受大流量DDoS攻击,且对延迟敏感,因此只需要在活动期间按需使用DDoS防护。本…