使用脚手架创建Vue3项目

news2024/11/25 6:28:54

在这里插入图片描述

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉
🍎个人主页:Leo的博客
💞当前专栏: Vue
✨特色专栏: MySQL学习
🥭本文内容:使用脚手架创建Vue3项目
🖥️个人小站 :个人博客,欢迎大家访问
📚个人知识库: 知识库,欢迎大家访问

1.前言

大家好,我是Leo哥🫣🫣🫣,最近在复习Vue3相关知识,今天主要想分享一下Vue3创建项目的几种方式。好了,话不多说让我们开始吧😎😎😎。

2.创建Vue3项目的几种方式

目前创建vue3的项目方式比较多:

  • vue-cli创建vue3项目
  • vite创建vue3项目
  • create-vue创建vue3项目

本次文章是主要介绍第二种和第三种方式进行演示,关于第一种使用vue-cli的方式创建项目,在vue2中使用较多,所以我们这里不过太多赘述。

3.使用Vite创建Vue3项目

  • 通过vite官网的介绍,我们可以通过vite创建各种各样的项目,我们这里直接执行创建就好了。
  • 我这里使用pnpm创建项目,大家可以选择其他包管理器进行项目创建。
pnpm create vite

image-20231127102927179

大家可以按照我这个步骤一步一步来即可。

第一步,进入我们创建好的vue3项目目录

cd vue3-demo

第二步,进行依赖安装

npm install

第三步,启动我们的vue3项目

npm run dev

image-20231127103648176

浏览器输入地址即可。

image-20231127103711652

看到上面,这个界面,说明我们已经大功告成了!

4.使用create-vue创建Vue3项目

  • 最后一种也是我最推荐大家使用的一种,这个库也是官方进行维护的,笔者一直都是使用这种方式进行创建的,简单粗暴。
  • 执行方式也是比较简单的,我们可以基于vite创建vue3或者vue2的项目
npm init vue@3
npm init vue@2

首先我们找一个我们需要创建项目的文件夹,右键打开cmd窗口。

image-20231127093955647

然后执行以下命令即可。

npm init vue@latest

image-20231127094145249

大家按照我这个步骤一步一步选择执行即可。

完成我们接着执行依次命令即可。

第一步,进入我们创建好的vue3项目目录

cd vue3-demo

第二步,进行依赖安装

npm install

第三步,启动我们的vue3项目

npm run dev

image-20231127102205009

浏览器输入地址即可。

image-20231127102245414

看到以上界面,说明我们的Vue3入门程序没问题,大功告成!

5.参考文献

  • https://vitejs.dev/
  • https://vuejs.org/

6.总结

以上便是本文的全部内容,本人才疏学浅,文章有什么错误的地方,欢迎大佬们批评指正!我是Leo,一个在互联网行业的小白,立志成为更好的自己。

如果你想了解更多关于Leo,可以关注公众号-程序员Leo,后面文章会首先同步至公众号。

公众号封面

本文由博客一文多发平台 OpenWrite 发布!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【MySQL | TCP】宝塔面板结合内网穿透实现公网远程访问

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置&#x…

多头注意力机制基本概念

文章目录 基本概念模型小结 基本概念 我们可以用独立学习得到的h组不同的 线性投影来变换查询、键和值。 然后,这h组变换后的查询、键和值将并行地送到注意力汇聚中。 最后,将这h个注意力汇聚的输出拼接在一起, 并且通过另一个可以学习的线性…

外汇天眼:嘿!他们说这个比赛有手就能赢,你敢不敢来试试?

在外汇市场的波涛汹涌中,一场引人注目的模拟交易比赛正在悄然展开,参与者们纷纷聚焦,听所有获奖的参赛投资者们说:这个比赛有手就能赢,你敢不敢来试试? 比赛规则简单而富有挑战性。你只需在外汇天眼APP开通…

【虹科干货】什么是软件成分分析(SCA)?

大家或许都发现了,开发人员愈发依赖开源代码来快速为其专有软件添加功能。据估计,开源代码占专有应用程序代码库的 60-80%。相伴而来的,除了更高的效率,还有更高的风险。因此,管理开源代码对于降低组织的安全风险至关重…

力扣:182. 查找重复的电子邮箱(Python3)

题目: 表: Person ---------------------- | Column Name | Type | ---------------------- | id | int | | email | varchar | ---------------------- id 是该表的主键(具有唯一值的列)。 此表的每一行都包含一封电子…

盛元广通实验室安全培训考试系统

盛元广通实验室安全培训考试系统是一种基于互联网和人工智能技术的在线考试平台,旨在旨在提供实验室安全教育和考核的全面解决方案。该系统可以帮助实现实验室安全培训考试的在线化、智能化和规范化,提高实验室安全意识和能力,保障实验室安全…

百度人工智能培训第二天笔记

参加了百度人工智能初步培训,主要是了解一下现在人工智能的基本情况,以便后续看可以参与一些啥? 下面就继续前一天的内容记录。 一、先做电动自行车的电梯里检测 先进行图片资料的上传与标注,这个昨天的最好也说了一下。 训练完后…

马斯克发布一封指控 Sam Altman 的匿名信引发猜测,OpenAI “宫斗大戏”终迎结局?

就在昨晚,持续了数日的 OpenAI 宫斗大戏,似乎终于要大结局了——OpenAI 官宣:Sam Altman 将回归 OpenAI,重新担任 CEO! “我们已达成原则性协议,Sam Altman 将重返 OpenAI 担任 CEO,新的初始董…

Temu要求提交RSL Report 铅镉或RSL-Phthalate邻苯报告如何办理

Temu要求提交RSL Report 铅镉或RSL-Phthalate邻苯报告如何办理 Temu要求提交RSL Report 铅镉或RSL-Phthalate邻苯报告如何办理 RSL Report是欧盟REACH法规要求的一种资质报告,旨在确保产品不含对人体有害的化学物质。在珠宝首饰行业中,RSL Report认证是…

(京东大数据分析)10月运动鞋服消费数据采集:服饰销量同比增长20%

10月份,在双11大促节的加持下,消费市场中不少品类的销售成绩均呈现增长。鲸参谋发现,运动鞋服消费类目也受到了市场及消费者的特别青睐,消费数据也有了明显增长,下面我们来看一看运动鞋服市场在10月的销售详情。 首先来…

成为一名优秀教师的关键要素

在教育领域,要想成为一名优秀的教师可是需要多方面的素质和技能的。以下是我总结出的几点关键要素,供大家参考。 热爱教育事业 首先对教育事业充满热爱和热情。只有对事业有强烈的兴趣和热爱,才能在漫长的工作中保持耐心、专注和投入。热爱教…

经典的Shiro反序列化漏洞复现

目录 0x01、前言 0x02、环境搭建 0x03、漏洞原理 0x04、漏洞复现 0x05、漏洞分析 5.1、加密 5.2、解密 0x06、总结 0x01、前言 相信大家总是面试会问到java反序列化,或者会问到标志性的漏洞,比如shiro反序列化,或者weblogic反序列化漏…

EasyExcel生成多sheet页的excel

一、controller层 ApiOperation(value "明细查询导出") PostMapping(value "/SummaryDetailExport") public void summaryDetailExport(RequestBody SearchDTO dto, HttpServletResponse response) throws IOException {reportService.deptPackagingSum…

sql中的left join, right join 和inner join,union 与union all的用法

left join, right join 和inner join:这些都是SQL中用来连接两个或多个表的操作。 union,union all:用于合并两个或多个 SELECT 语句的结果。 但是有时候,对于Select出来的结果集不是很清楚。 假设我们有两张表。pers…

2019年12月19日 Go生态洞察:Go模块化之旅

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

本地Nginx服务搭建结合内网穿透实现多个Windows Web站点公网访问

文章目录 1. 下载windows版Nginx2. 配置Nginx3. 测试局域网访问4. cpolar内网穿透5. 测试公网访问6. 配置固定二级子域名7. 测试访问公网固定二级子域名 1. 下载windows版Nginx 进入官方网站(http://nginx.org/en/download.html)下载windows版的nginx 下载好后解压进入nginx目…

软件建模与文档:架构师怎样绘制系统架构蓝图?

Java全能学习面试指南:https://javaxiaobear 首先,请你设想这样一个场景:如果公司安排你做架构师,要你在项目开发前期进行软件架构设计,你该如何开展你的工作?如何输出你的工作成果?如何确定你的…

js获取当前时间并转换各种形式

执行代码 const time new Date();console.log(time);console.log(time.toDateString());console.log(time.toTimeString());console.log(time.toJSON());console.log(time.toISOString());console.log(time.toLocaleDateString());console.log(time.toLocaleString());console…

【面经八股】搜广推方向:面试记录(三)

【面经&八股】搜广推方向:面试记录(三) 文章目录 【面经&八股】搜广推方向:面试记录(三)1. 编程题1.1 大数乘法1.2 大数加法2. 项目介绍3. 有了解过的广告推荐模型吗4. 广告模型回归问题1. 编程题 上来直接写编程题,有点儿懵逼。 1.1 大数乘法 可以参考 该博…