利用vite快速搭建vue3项目

1、选择一个文件夹,在vscode终端打开,输入命令【npm create vite@latest

npm create vite@latest

2、提示你输入项目名称之后,我这里设置的是【rookiedemo

3、回车之后,出现选择框架的提示,我们选择【vue】回车

4、之后根据你的编码习惯或需要,选择【ts】或者【js】,点回车

5、vite非常贴心,按照对应的提示,即可

6、【cd rookiedemo】进入对应的工程目录

7、【npm install】安装

安装中……

安装完毕……

8、【npm run dev】运行

9、浏览器打开即可看到

整个过程非常简便快捷!

通过以上步骤,我们就得到了一个非常纯净的框架基底

之后我们将一步一步给这个框架基底添加基础的好用的工具,以便快捷开发。

各位小伙伴,可以蹲下我后续的文章哦^-^

小Tips:

Vite 需要 Node.js 版本 18+,20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

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

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

相关文章

js中使用for in注意事项,key的类型为string类型

for in是一个非常实用的存在,既可以遍历数组,又可以遍历对象,所以我一般都是会用来遍历可迭代的数据,遍历数组和对象的时候,要注意使用万能遍历方式: const users [1, 3, 45, 6]// const users {// 1…

Polyspace静态检测步骤

Polyspace 是一个代码静态分析和验证的工具,隶属于MATLAB,用于检测代码中的错误和缺陷,包括内存泄漏、数组越界、空指针引用等。帮助开发团队提高代码质量,减少软件开发过程中的错误和风险。 1、打开MATLAB R2018b 2、找到Polys…

AR智能眼镜主板硬件设计_AR眼镜光学方案

AR眼镜凭借其通过导航、游戏、聊天、翻译、音乐、电影和拍照等交互方式,将现实与虚拟进行无缝融合的特点,实现了更加沉浸式的体验。然而,要让AR眼镜真正成为便捷实用的智能设备,需要解决一系列技术难题,如显示、散热、…

Stable Diffusion 绘画入门教程(webui)-图生图

通过之前的文章相信大家对文生图已经不陌生了,那么图生图是干啥的呢? 简单理解就是根据我们给出的图片做为参考进行生成图片。 一、能干啥 这里举两个例子 1、二次元头像 真人转二次元,或者二次元转真人都行, 下图为真人转二次…

小清新卡通人物404错误页面源码

小清新卡通人物404错误页面源码由HTMLCSSJS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面 蓝奏云:https://wfr.lanzout.com/i6XbU1olftde

二叉树(6)——二叉树的创建和销毁

1 二叉树的创建 整体思路 将数组里的元素一直分为根,左子树,右子树,遇到#就返回NULL,链接到上层递归的左子树或者右子树,一定要把一个节点的左子树全部递归完才能返回到右子树。这种方法也可以scanf一个数组里的元素&…

Spring Boot项目怎么对System.setProperty(key, value)设置的属性进行读取加解密

一、前言 之前我写过一篇文章使用SM4国密加密算法对Spring Boot项目数据库连接信息以及yaml文件配置属性进行加密配置(读取时自动解密),对Spring Boot项目的属性读取时进行加解密,但是没有说明对System.setProperty(key, value)设…

Docker Compose映射卷的作用是什么,dockerfile这个文件有什么区别和联系?

Docker Compose中映射卷(Volumes)的作用和Dockerfile之间既有区别也有联系。下面详细解释两者的作用、区别和联系: Docker Compose映射卷的作用 在Docker Compose中,卷(Volumes)用于数据持久化和数据共享…

【实战 JS逆向+python模拟获取+Redis token会话更新】实战模拟测试 某巴批发网 仅供学习

逆向日期:2024.02.20 使用工具:Node.js、python、Redis 加密方法:md5标准库 文章全程已做去敏处理!!! 【需要做的可联系我】 AES解密处理(直接解密即可)(crypto-js.js 标…

day07-实战-今日指数

今日指数-day07 1.股票Code联想推荐 1.1 股票Code联想推荐功能介绍 1) 原型效果 输入框输入股票编码后,显示关联的股票信息; 2)接口定义说明 接口说明: 功能描述:根据输入的个股代码,进行模糊查询,返…

Python学习-流程图、分支与循环(branch and loop)

十、流程图 1、流程图(Flowchart) 流程图是一种用于表示算法或代码流程的框图组合,它以不同类型的框框代表不同种类的程序步骤,每两个步骤之间以箭头连接起来。 好处: 1)代码的指导文档 2)有助…

云服务器ECS价格表出炉——阿里云

2024年阿里云服务器租用价格表更新,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、ECS u1实例2核4G、5M固定带宽、80G ESSD Entry盘优惠价格199元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月、2核4G服…

docker (十一)-进阶篇-docker-compos最佳实践部署zabbix

一 部署docker环境 关闭防火墙、selinux、开启docker,并设置开机自启动 注意点:docker部署的时候,bip要指定,不然会导致虚拟机ip和容器ip冲突,ssh连不上虚拟机 部署请参考 docker (二)-yum…

【python】windowslinux系统python的安装

一、python官网及下载路径 官网地址:Welcome to Python.org 下载路径:Download Python | Python.org ​​​​​​​ linux源码安装包下载: windows二进制安装包下载: 二、Linux如何安装python 2.1 单版本安装 以安装python…

Codeforces Beta Round 15 C. Industrial Nim Nim,1~n的异或和

Problem - 15C - Codeforces 目录 Nim游戏: 1~n的异或和: 代码: Nim游戏: n个石头堆,谁最后没得取谁败 我用的异或思考法,对所有堆异或。开局异或和为0的败 最后全是0,异或完也是0. //最…

DDI中的自适应子结构

SA-DDI提出了一种子结构感知图神经网络,一种配备了子结构注意力机制和用于DDI预测的子结构-子结构交互模块(SSIM)的消息传递神经网络。具体而言,基于分子中官能团的尺寸和形状通常是不规则的化学直觉,子结构注意力被设…

线阵相机之帧超时

1 帧超时的效果 在帧超时时间内相机若未采集完一张图像所需的行数,则相机会直接完成这张图像的采集,并自动将缺失行数补黑出图,机制有以下几种选择: 1. 丢弃整张补黑的图像 2. 保留补黑部分出图 3.丢弃补黑部分出图

混子文章|蓝桥杯一题 -平方差

题目考点: 平方差 ,平方差奇偶关系 代码 #include<bits/stdc.h> #define Run 0 #define endl "\n" #define N 100005 using unl __int128_t; using ll long long; using namespace std; class Solution { public: void slove() {int sum 0;int L, R; cin &…

内存计算研究进展-针对机器学习的近数据计算架构

针对机器学习的近数据计算架构代表性工作有&#xff1a; Georgia Institute of Technology的BSSync (bounded staled sync) 和 Neurocube&#xff0c;Advanced Micro Devices 的 CoML&#xff0c;具体如下。 1 BSSync BSSync指出&#xff0c;在并行实现的机器学习应用中&#…

代码随想录算法训练营DAY21 | 二叉树 (9)

一、LeetCode 669 修建二叉搜索树 题目链接&#xff1a;669.修建二叉搜索树https://leetcode.cn/problems/trim-a-binary-search-tree/description/ 思路&#xff1a;递归三部曲-定参数、返回值-定终止条件-定单层递归逻辑 class Solution {public TreeNode trimBST(TreeNode …