使用脚手架创建Vue3项目

在这里插入图片描述

✅作者简介:大家好,我是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.mzph.cn/news/173827.shtml

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

相关文章

Redis 两种持久化方式 AOF 和 RDB

目录 一、Redis 的持久化 二、Redis 的持久化方式 RDB RDB 介绍 RDB 的触发方式:. 三、RDB的文件生成策略 四、Save 和 Bgsave 命令的区别 六、RDB 最佳配置 七、触发机制-不容忽略方式 AOF 一、AOF介绍 二、RDB所存在的问题 三、AOF 三种策略 四、AOF…

谭巍主任贴心分享:想要HPV尽快转阴必吃的五种水果

HPV感染是常见的生殖道病毒感染,它可能导致宫颈癌等严重疾病。对于HPV感染者来说,转阴是预防和治疗的关键。北京劲松HPV诊疗中心主任谭巍认为除了接受正规的治疗和注意生活方式的调整外,饮食也是促进HPV快速转阴的重要方面。 一、苹果 苹果…

2.5 - 网络协议 - HTTP协议工作原理,报文格式,抓包实战

「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 HTTP协议 1、HTTP协议工作原理2、HTTP协议报文3、H…

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

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

mysql文本类型的最大长度限制

mysql支持很多类型&#xff0c;不同的文本有不同的长度限制。可以根据实际需要进行选择。 TINYBLOB, TINYTEXT L 1 bytes, where L < 2^8 (255 Bytes) BLOB, TEXT L 2 bytes, where L < 2^16 (64 Kilobytes) MEDIUMBLOB, MEDIUMTEXT L 3 b…

Jupyter Notebook本地部署并实现公网远程访问内网Jupyter服务器【内网穿透】

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 1.前言2.Jupyter Notebook的安装2.1 Jupyter Notebook下载安装2.2 Jupyter Notebook的配…

Vue3中调用外部iframe链接方法

业务场景&#xff0c;点击某个按钮需要跳转到外部iframe的地址&#xff0c;但是需要在本项目内显示。以前项目中写过调用外部链接的功能&#xff0c;是有菜单的&#xff0c;但是这次是按钮&#xff0c;所以不能直接把地址配到菜单里。 实现方法&#xff1a;在本地路由文件里写个…

计算机组成原理-Cache写策略

文章目录 总览写命中写回法全写法 写不命中写分配法非写分配法 多级Cache总结 总览 写命中 写回法 数据不一致指的是Cache中的和主存中的数据不一致 全写法 写缓冲 利用写缓冲使得将写入Cache的数据在写入Cache的数据同时也会写入写缓冲。然后再在 CPU在干其他事时有控制电…

基于动量的梯度下降

丹尼尔林肯 (Daniel Lincoln)在Unsplash上拍摄的照片 一、说明 基于动量的梯度下降是一种梯度下降优化算法变体&#xff0c;它在更新规则中添加了动量项。动量项计算为过去梯度的移动平均值&#xff0c;过去梯度的权重由称为 Beta 的超参数控制。 这有助于解决与普通梯度下降相…

数据结构 / 顺序表 / 顺序表概述和结构体定义

1. 顺序表概述 顺序表&#xff1a;线性表的顺序存储称为顺序表逻辑结构&#xff1a;线性结构(一对一)存储结构&#xff1a;顺序存储(使用一段连续的存储空间存储类型相同的数据元素)顺序表&#xff1a;逻辑相邻&#xff0c;物理也相邻顺序表是借助于数组实现&#xff0c;但是不…

【Spring】Spring是什么?

文章目录 前言什么是Spring什么是容器什么是 IoC传统程序开发控制反转式程序开发理解Spring IoCDI Spring帮助网站 前言 前面我们学习了 servlet 的相关知识&#xff0c;但是呢&#xff1f;使用 servlet 进行网站的开发步骤还是比较麻烦的&#xff0c;而我们本身程序员就属于是…

算法leetcode|90. 子集 II(rust重拳出击)

文章目录 90. 子集 II&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 90. 子集 II&#xff1a; 给你一个整数数组 nums &#xff0c;其…

Android查看当前机器的ABI类型

文章目录 使用 adb 命令&#xff1a;使用设备设置&#xff1a; 在 Android 设备上&#xff0c;可以通过执行以下步骤来查看当前机器的 ABI&#xff08;Application Binary Interface&#xff09;类型&#xff1a; 使用 adb 命令&#xff1a; 连接 Android 设备&#xff1a; 确保…

嵌入式基础知识学习:I2C通信协议

https://zhuanlan.zhihu.com/p/647656964 https://blog.csdn.net/FYBZ2020/article/details/128486981 I2C总线概述 I2C&#xff08;Inter-Integrated Circuit&#xff09;总线是两线式串行通信总线&#xff0c;是微电子通信控制领域广泛采用的一种总线标准。 在介绍I2C总线…

【转】ORB-SLAM2调用OAK-D双目摄像头进行点云建图

编辑&#xff1a;OAK中国 首发&#xff1a;A. hyhCSDN 喜欢的话&#xff0c;请多多&#x1f44d;⭐️✍ 内容来自用户的分享&#xff0c;如有疑问请与原作者交流&#xff01; ▌前言 Hello&#xff0c;大家好&#xff0c;这里是OAK中国&#xff0c;我是助手君。 近期在CSDN刷…

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

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

OpenGL的学习之路 -5

1.视景体 正交投影 人眼看世界&#xff0c;有一个可见范围。范围内可见&#xff0c;范围外不可见。视景体就是这么一个概念。 &#xff08;上图仅学习记录用&#xff09; 在OGL中&#xff0c;有两种投影方式&#xff0c;对应两种视景体。第一种&#xff0c;正交投影&#xf…

Linux进程状态(僵尸进程,孤儿进程)+进程优先级+进程调度与切换

Linux进程状态[僵尸进程,孤儿进程]进程优先级 一.进程状态1.进程排队2.教材上对于进程状态的描述:1.阻塞挂起 3.Linux下具体的进程状态:1.Linux下的进程状态数组2.R3.S:可终止睡眠---浅度睡眠1.补充:前台进程和后台进程2.一种"奇怪"的现象 4.D:不可终止睡眠---深度睡…

探索人类命运与宇宙奥秘的震撼之旅 豆瓣高分巨作《三体》湖北卫视开播

当思考触及宇宙的边缘&#xff0c;当人类命运与外星文明相碰撞&#xff0c;电视剧《三体》以其深邃的内涵和引人深思的故事&#xff0c;重新审视人类的过去、现在和未来&#xff0c;带我们逐步揭开地外未知文明“三体”世界的神秘面纱。根据著名科幻作家刘慈欣同名小说改编&…

Ubuntu新手使用教程

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…