Vite快速构建Vue教程

news2025/2/28 20:13:07
步骤 1: 初始化项目目录

创建一个名为 projects 的文件夹,作为存放所有 Vite 项目的根目录。这个文件夹将容纳多个独立的 Vite 项目。

步骤 2: 创建 Vite 项目
  • 右键点击 projects 文件夹并选择“在此处打开终端”或使用您偏好的代码编辑器(如 VSCode)的内置终端。
  • 在终端中输入命令 pnpm create vite 并按回车开始创建过程。
  • 输入您的项目名称,并再次按回车确认。
  • 使用箭头键选择第二个选项 vue 以指定项目框架为 Vue,然后按回车。


 

  • 接着选择第三个选项 Customize with create-vue 来手动配置 Vue 
  • 对于后续的所有配置选项,保持默认设置(即 false),直接按回车继续。

当您看到以下提示时,表示项目创建成功:

步骤 3: 安装依赖与启动开发服务器
  • 使用命令 cd  <项目名> 进入刚刚创建的项目文件夹。
  • 执行 pnpm i  来安装项目所需的依赖包。
  • 最后,运行 pnpm dev 启动开发服务器。

当您看到如下信息时,表明开发服务器已成功启动:

此时,可以通过按下 Ctrl 键并点击 http://localhost:5173/ 访问您的本地项目。

步骤 4: 清理项目结构

为了简化项目,建议清理不必要的文件和代码:

  • 删除 src 文件夹下除 App.vue 外的所有文件。(可以选择保留空的 components 文件夹)
  • 移除 main.js 中的 import './assets/main.css' 行。
  • 在 App.vue 中编写简单的模板代码,例如 <template><div>Hello, World!</div></template>,然后刷新浏览器查看更改效果。

 


通过遵循上述优化过的指导,您可以更高效地搭建和配置一个新的 Vite + Vue 项目环境。

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

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

相关文章

springboot429校运会管理系统(论文+源码)_kaic

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装校运会管理系统软件来发挥其高效地信息处理的作用&#xff…

深度学习实验十四 循环神经网络(1)——测试简单循环网络的记忆能力和梯度爆炸实验

目录 一、数据集构建 1.1数据集的构建函数 1.2加载数据集并划分 1.3 构建Dataset类 二、模型构建 2.1嵌入层 2.2SRN层 2.3模型汇总 三、模型训练 3.1 训练指定长度的数字预测模型 3.2 损失曲线展示 四、模型评价 五、修改 附完整可运行代码 实验大体步骤&#x…

SQL去重查询C++ 中面向对象编程如何实现数据隐藏?C++ 中面向对象编程如何处理异常?Pimpl模式

SQL2 查询多列 select device_id,gender,age,university from user_profile; SQL3 查询结果去重 select distinct university from user_profile; select university from user_profile group by university; C 中面向对象编程如何实现数据隐藏&#xff1f; 使用访问控制修饰…

基于物联网的 AI 智能送药车与自维护基站系统研究

一、引言 &#xff08;一&#xff09;研究背景 随着科技的飞速发展&#xff0c;物联网技术在各个领域都展现出了巨大的潜力。在医疗领域&#xff0c;物联网技术的应用为提高医疗服务的效率和质量带来了新的机遇。其中&#xff0c;基于物联网的 AI 智能送药车与自维护基站系统…

sentinel 限流保护-笔记

本文属于b站图灵课堂springcloud笔记系列。讲的好还不要钱&#xff0c;值得推荐。 为什么要引入限流组件&#xff1f; 在微服务环境下&#xff0c;服务之间存在复杂的调用关系&#xff0c;单个服务的故障或过载可能会迅速影响到整个系统&#xff0c;导致服务雪崩效应。流控组件…

鸿蒙NEXT开发案例:颜文字搜索器

【引言】 本文将介绍一个名为“颜文字搜索器”的开发案例&#xff0c;该应用是基于鸿蒙NEXT平台构建的&#xff0c;旨在帮助用户快速查找和使用各种风格的表情符号。通过本案例的学习&#xff0c;读者可以了解如何在鸿蒙平台上进行数据处理、UI设计以及交互逻辑的实现。 【环…

【IntelliJ IDEA 集成工具】TalkX - AI编程助手

前言 在数字化时代&#xff0c;技术的迅猛发展给软件开发者带来了更多的挑战和机遇。为了提高技术开发群体在繁多项目中的编码效率和质量&#xff0c;他们需要一个强大而专业的工具来辅助开发过程&#xff0c;而正是为了满足这一需求&#xff0c;TalkX 应运而生。 一、概述 1…

python学opencv|读取图像(十二)BGR图像转HSV图像

【1】引言 前述已经学习了opencv中图像BGR相关知识&#xff0c;文章链接包括且不限于下述&#xff1a; python学opencv|读取图像&#xff08;六&#xff09;读取图像像素RGB值_opencv读取灰度图-CSDN博客 python学opencv|读取图像&#xff08;七&#xff09;抓取像素数据顺利…

Linux(网络协议和管理)

后面也会持续更新&#xff0c;学到新东西会在其中补充。 建议按顺序食用&#xff0c;欢迎批评或者交流&#xff01; 缺什么东西欢迎评论&#xff01;我都会及时修改的&#xff01; 在这里真的很感谢这位老师的教学视频让迷茫的我找到了很好的学习视频 王晓春老师的个人空间…

代码随想录训练营第十七天| 654.最大二叉树 617.合并二叉树 700.二叉搜索树中的搜索 98.验证二叉搜索树

654.最大二叉树 题目链接/文章讲解&#xff1a; 代码随想录 视频讲解&#xff1a;又是构造二叉树&#xff0c;又有很多坑&#xff01;| LeetCode&#xff1a;654.最大二叉树_哔哩哔哩_bilibili 创建一个根节点&#xff0c;其值为 nums 中的最大值。递归地在最大值 左边 的 子…

ISP(Image Signal Processor)——HDR技术总结

传统多帧融合技术 拍摄一系列不同曝光时长的图像帧&#xff08;LDR&#xff09;&#xff0c;然后使用融合算法进行融合成HDR图像。 融合算法可以分为两种 基于照度图估计的融合 基于照度估计需要拟合相机响应函数&#xff0c;详细可以参考如下论文&#xff1a; Recovering H…

【理想汽车中科院】基于模仿学习的端到端自动驾驶数据缩放规律

论文: https://arxiv.org/pdf/2412.02689 项目: https://github.com/ucaszyp/Driving-Scaling-Law 0. 摘要 端到端自动驾驶范式因其可扩展性而最近吸引了大量关注。然而&#xff0c;现有方法受到现实世界数据规模有限的制约&#xff0c;这阻碍了对端到端自动驾驶相关扩展规律…

程序的调试

一名优秀的程序员也是一名出色的侦探&#xff0c;每一次调试都是尝试破案的过程 前言 一、什么是调试&#xff1f; 二、调试 1.调试是什么 2.基本步骤 三、调试注意事项 1.怎么写出易于调试的代码 2.常见错误 总结 前言 主要是怎么调试&#xff0c;调试的注意事项&#xff0c…

Linux内核移植之内核简介

学到本章节&#xff0c;大家应该对Linux操作系统都有了一定的了解&#xff0c;但可能还不知道我们拿到手的内核源码都经历了什么。 linux有一个庞大的开源社区&#xff0c;每个人都可以向开源社区提交代码。由于linux内核十分庞大所以每个模块都有对应的维护人员。维护人员的工…

2024年鄂州初级、中级职称公示了

本次鄂州市工程、中职教师、技工学校教师、档案、农业、新闻、艺术、群文、文博等专业中级和初级职称公示了&#xff0c;通过共有371人&#xff0c;公示时间为2024年12月9日至2024年12月13日。 本次公示工程类中级职称人员有210人通过评审&#xff0c;助理职称有35人通过评审。…

node_modules文件夹删除失败解决办法

在前端开发过程中&#xff0c;node_modules 文件夹是一个必不可少的组成部分&#xff0c;里面存放着项目所需的各种依赖包。然而&#xff0c;随着项目的发展&#xff0c;node_modules 文件夹可能会变得异常庞大&#xff0c;甚至有时需要删除它来解决一些依赖冲突或清理空间。但…

【合作原创】使用Termux搭建可以使用的生产力环境(六)

前言 在上一篇【合作原创】使用Termux搭建可以使用的生产力环境&#xff08;五&#xff09;-CSDN博客我们讲到了如何美化xfce4桌面&#xff0c;达到类似于Windows的效果&#xff0c;这一篇将继续在上一篇桌面的基础上给我们的系统装上必要的软件&#xff0c;让它做到真正可以使…

40 list类 模拟实现

目录 一、list类简介 &#xff08;一&#xff09;概念 &#xff08;二&#xff09;list与string和vector的区别 二、list类使用 &#xff08;一&#xff09;构造函数 &#xff08;二&#xff09;迭代器 &#xff08;三&#xff09;list capacity &#xff08;四&#x…

小程序开发常见问题

一、开发方案选择 1.小程序原生开发&#xff1a;需要live-player组件资质&#xff0c;对开发者的资质要求较高&#xff0c;开发难度较大&#xff1b; 2.小程序内嵌H5&#xff1a;因校验文档上限&#xff0c;目前平台已经不支持配置校验文件&#xff1b; 3.半屏小程序&#xff1…

02. Docker:安装和操作

目录 一、Docker的安装方式 1、实验环境准备 1.1 关闭防火墙 1.2 可以访问网络 1.3 配置yum源 2、yum安装docker 2.1 安装docker服务 2.2 配置镜像加速 2.3 启动docker服务 3、二进制安装docker 3.1 下载或上传安装包并解压 3.2 配置使用systemctl管理 3.3 配置镜像…