当前位置： 首页 > news >正文

Vite快速构建Vue教程

news 来源：原创 2025/9/22 5:12:04
步骤 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 项目环境。

相关文章：

Vite快速构建Vue教程

步骤 1: 初始化项目目录 创建一个名为 projects 的文件夹&#xff0c;作为存放所有 Vite 项目的根目录。这个文件夹将容纳多个独立的 Vite 项目。 步骤 2: 创建 Vite 项目 右键点击 projects 文件夹并选择“在此处打开终端”或使用您偏好的代码编辑器&#xff08;如 VSCode&…...

编程日记 2025/9/22 5:12:04

四、个人项目系统搭建

文章目录 一、python写的后端代码二、html代码三、index.css四、js代码 效果图&#xff1a; 一、python写的后端代码 后端代码使用Flask编写&#xff0c;如下所示&#xff1a; # app.py from flask import Flask, render_template, request, jsonify, g import sqlite3 import…...

编程日记 2025/9/19 14:07:58

长沙理工大学《2024年825自动控制原理真题》 (完整版）

本文内容&#xff0c;全部选自自动化考研联盟的&#xff1a;《长沙理工大学825自控考研资料》的真题篇。后续会持续更新更多学校&#xff0c;更多年份的真题&#xff0c;记得关注哦~ 目录 2024年真题 Part1&#xff1a;2024年完整版真题 2024年真题...

编程日记 2025/9/22 16:32:32

Linux上安装Anaconda

查看版本 lsb_release -a uname -m x86_64&#xff1a;表示系统是64位。i686、i386&#xff1a;表示系统是32位。 到连接安装对应版本 连接到ldhttps://repo.anaconda.com/archive/ 配置对应的conda环境&#xff0c;export PATH/对应目录/anaconda3/bin:$PATH *注意为bi…...

编程日记 2025/9/19 20:05:28

HTTP常见的请求头有哪些？都有什么作用？在 Web 应用中使用这些请求头？

HTTP 请求头&#xff08;Request Headers&#xff09;用于在 HTTP 请求中携带额外的信息&#xff0c;帮助服务器更好地处理请求。以下是一些常见的 HTTP 请求头及其作用&#xff1a; 常见请求头及其作用 1. Accept 作用&#xff1a;告知服务器客户端可以接受的内容类型。示例…...

编程日记 2025/9/21 0:20:42

扩展tinyplay使其自适应不同声道数量的媒体

android原来的tinyplay代码&#xff0c;如果遇到播放媒体的升到数量与打开pcm的声道数量不匹配的情况&#xff0c;会没法继续播放。 本例扩展了tinyplay的代码&#xff0c;将不同声道的音频数据展开/压缩到pcm设备支持的数据&#xff0c;再写入pcm设备。 bplay.c #include &l…...

编程日记 2025/9/20 19:56:22

[Unity] AppLovin Max接入Native 广告 IOS篇

NativeIOS构建流程 &#xff08;接入之前备份之前打包得Xcode工程&#xff09; 下载资源 1.将以下文件放入Unity Assets->Plugins->IOS文件夹下 2.Unity更新max版本至12.4.1 UnityPlugin 6.4.3以上&#xff08;很重要&#xff09; 3.NativeSDKManager.CS根据以下附…...

编程日记 2025/9/22 2:33:52

跨平台开发技术的探索：从 JavaScript 到 Flutter

随着多平台支持和用户体验一致性在应用程序开发中变得越来越重要，开发者面临的挑战是如何在不同平台上保持代码的可维护性和高效性。本文将探讨如何利用现代技术栈，包括 Flutter、JavaScript、HTML5、WebAssembly、TypeScript 和 Svelte，在统一的平台上进行高效的跨平台开发…...

编程日记 2025/9/22 15:38:34

计算机网络技术基础：2.计算机网络的组成

计算机网络从逻辑上可以分为两个子网&#xff1a;资源子网和通信子网。 一、资源子网 资源子网主要负责全网的数据处理业务&#xff0c;为全网用户提供各种网络资源与网络服务。资源子网由主机、终端、各种软件资源与信息资源等组成。 1&#xff09;主机 主机是资源子网的主要…...

编程日记 2025/9/19 3:23:56

PKCS#7、Bit padding（位填充）、Byte padding（字节填充）、Zero padding（零填充）

PKCS#7、Bit padding&#xff08;位填充&#xff09;、Byte padding&#xff08;字节填充&#xff09;、Zero padding&#xff08;零填充&#xff09;是密码学常见的填充方式。 Bit padding&#xff08;位填充&#xff09;&#xff1a; 位填充可以应用于任意长度的消息。在消息…...

编程日记 2025/9/22 2:45:52

在 Kibana 中为 Vega Sankey 可视化添加过滤功能

作者&#xff1a;来自 Elastic Tim Bosman 及 Miloš Mandić 有兴趣在 Kibana 中为 Vega 可视化添加交互式过滤器吗&#xff1f;了解如何利用 “kibanaAddFilter” 函数轻松创建动态且响应迅速的 Sankey 可视化。 在这篇博客中&#xff0c;我们将了解如何启用 Vega Sankey 可视…...

编程日记 2025/9/21 14:39:45

快速部署一套K8s集群-v1.28

快速部署一套K8s集群-v1.28 1.前置知识点 1.1 生产环境可部署Kubernetes集群的两种方式 目前生产部署Kubernetes集群主要有两种方式： kubeadmKubeadm是一个K8s部署工具，提供kubeadm init和kubeadm join，用于快速部署Kubernetes集群。 二进制包从github下载发行版的二进…...

编程日记 2025/9/21 4:23:50

python3验证有效正则表达式

Python 中字符串类型本质上没有标记“是否原始”的特性&#xff0c;原始字符串只是为了书写方便。运行时&#xff0c;原始字符串与普通字符串的表现是相同的&#xff0c;唯一的区别是编写代码时是否进行了转义。 因此&#xff0c;如果需要确保某些输入是有效正则表达式&#x…...

编程日记 2025/9/20 19:46:26

Dify+Xinference本地部署Embedding和Rerank模型

文章目录 1、Xinference介绍2、Xinference安装2.1 Xinference Docker安装2.2 pip安装2.3 设置开启自启动&#xff08;仅针对pip安装用户&#xff09; 3、部署Embedding和Rerank模型4、Dify调用Xinference模型 1、Xinference介绍 ‌Xinference‌是一个性能强大且功能全面的分布…...

编程日记 2025/9/22 13:50:25

是时候戒掉小游戏了

玩儿这东西没够&#xff01;去年本来是要备考CPA&#xff0c;但是赶上写毕业论文&#xff0c;就以此为由&#xff0c;没有去备考&#xff0c;结果论文没完成&#xff0c;考试也没准备&#xff0c;都是游戏惹的祸&#xff01;今年计划备考&#xff0c;看了两个月书&#xff0c;结…...

编程日记 2025/9/21 20:14:58

ECMAScrip 与 ES2015（ES6）：JavaScript 现代化编程的里程碑

在 JavaScript 的发展历程中&#xff0c;ECMASCript 和 ES2015&#xff08;也称为 ES6&#xff09;无疑是最具革命性的版本之一。它们不仅引入了大量的新特性和语法糖&#xff0c;还极大地提升了代码的可读性、可维护性和性能。本文将深入探讨 ECMASCrip 和 ES2015 的新特性及其…...

编程日记 2025/9/20 1:58:24

iOS swift开发系列 -- tabbar问题总结

1.单视图如何改为tabbar&#xff0c;以便显示2个标签页 右上角➕&#xff0c;输入tabbar 找到控件&#xff0c;然后选中&#xff0c;把entrypoint移动到tabbar控件 2.改成tabbar&#xff0c;生成两个item&#xff0c;配置各自视图后&#xff0c;启动发现报错 Thread 1: “-[p…...

编程日记 2025/9/19 7:31:27

nginx 部署 ModSecurity3

一、查看本地nginx版本 nginx是yum安装的 # nginx -v nginx version: nginx/1.26.2 二、安装依赖工具 # yum install -y gcc-c flex bison yajl lmdb lua curl-devel curl GeoIP-devel zlib-devel pcre-devel pcre2-devel libxml2-devel ssdeep-devel libtool autoconf aut…...

编程日记 2025/9/20 10:34:58

websocket_asyncio

WebSocket 和 asyncio 指南 简介 本指南涵盖了使用 Python 中的 websockets 库进行 WebSocket 编程的基础知识&#xff0c;以及 asyncio 在异步非阻塞 I/O 中的作用。它提供了构建高效 WebSocket 服务端和客户端的知识&#xff0c;以及 asyncio 的特性和优势。 1. 什么是 WebS…...

编程日记 2025/9/20 5:06:34

一级考试真题（2019）

一级考试真题&#xff08;2019&#xff09;...

编程日记 2025/9/20 15:05:18

OpenCV相机标定与3D重建(20)将单应性矩阵分解为旋转矩阵、平移向量和法向量函数decomposeHomographyMat()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 将单应性矩阵分解为旋转矩阵、平移向量和法向量。 cv::decomposeHomographyMat 是 OpenCV 库中的一个函数&#xff0c;用于将单应性矩阵&#xf…...

编程日记 2025/9/20 15:45:26

题解 - 取数排列

题目描述 取1到N共N个连续的数字&#xff08;1≤N≤9&#xff09;&#xff0c;组成每位数不重复的所有可能的N位数&#xff0c;按从小到大的顺序进行编号。当输入一个编号M时&#xff0c;就能打印出与该编号对应的那个N位数。例如&#xff0c;当N&#xff1d;3时&#xff0c;可…...

编程日记 2025/9/20 6:46:31

LVGL9.2 鼠标悬停处理

文章目录 前言鼠标悬停处理功能简介使用场景1. **按钮悬停效果**2. **图标高亮**3. **动态工具提示** 实现原理使用方法1. 设置控件样式2. 监听悬停事件 功能亮点注意事项总结 前言 在 v9.2 版本中&#xff0c;新增了许多功能&#xff0c;其中鼠标悬停处理&#xff08;Mouse H…...

编程日记 2025/9/20 15:31:12

每日计划-1213

1. 完成 SQL2 查询多列 https://www.nowcoder.com/exam/oj?page1tabSQL%E7%AF%87topicId199 2. 八股部分 1) C 中面向对象编程如何实现数据隐藏&#xff1f; 在c中&#xff0c;可以将数据成员声明为私有或受保护&#xff0c;并提供公有的成员函数来访问和修改这些数据成员&am…...

编程日记 2025/9/22 11:27:20

gz中生成模型

生成模型 通过服务调用生成 还记得parameter_bridge 吗&#xff1f; 我们在生成桥接的时候调用了这个cpp文件。 一个 parameter_bridge 实例用于消息传递&#xff08;传感器数据&#xff09;。之前的例子 另一个 parameter_bridge 实例用于服务桥接&#xff08;动态生成模型…...

编程日记 2025/9/22 0:48:59

三相电机不转，如何判断好坏？

在现代工业生产中&#xff0c;三相电机被广泛应用于各类机械设备中&#xff0c;由于其高效能和稳定性&#xff0c;成为驱动设备的首选。然而&#xff0c;在实际使用过程中&#xff0c;三相电机有时会出现不转动的情况&#xff0c;这不仅会影响生产效率&#xff0c;还可能对设备…...

编程日记 2025/9/22 6:22:21

使用观测云排查数据库死锁故障

故障发现 核心应用 pod 发生重启&#xff0c;同时接收到对应使用者反馈业务问题&#xff0c;开始排查。 观测云排查现场 1、根据重启应用信息&#xff0c;查询 APM 执行数据库 update 操作大量报错&#xff0c;执行时间在 5min 以上。 分析 APM 链路异常&#xff0c;发现是触…...

编程日记 2025/9/20 9:21:00

STM32 USB通信知识与应用详解

在嵌入式系统开发中&#xff0c;STM32作为一款性能卓越的微控制器&#xff0c;其USB通信功能的应用十分广泛。本文将深入探讨STM32 USB的相关知识&#xff0c;从基础概念到实际应用&#xff0c;为读者呈现一个全面的STM32 USB通信知识体系。 一、USB基础知识 USB&#xff08;…...

编程日记 2025/9/20 14:54:11

IoTDB 集群扩容方法

问题 问题1&#xff1a;当时序数据库 IoTDB 集群的存储占用达到多少时&#xff0c;建议增加节点&#xff1f;是等到存储完全满&#xff0c;还是达到一半时就进行扩容&#xff1f;如果集群存储已满&#xff0c;是否需要手动进行数据清理&#xff0c;比如设置 TTL&#xff0c;还…...

编程日记 2025/9/21 16:52:24

控制台报错：Uncaught (in promise)：XXXXX问题定位以及前端文件流excel文件下载方法

今天对接上传文件的接口时&#xff0c;明明接口是通的&#xff0c;也正常返回了文件流&#xff0c;然而&#xff0c;控制台就是打印不出返回值&#xff0c;而且一直报错Uncaught (in promise)&#xff1a;XXXXX 去查看axios的封装函数&#xff0c;这个internal error是从返回值…...

编程日记 2025/9/21 20:48:53

.NET平台使用C#设置Excel单元格数值格式

设置Excel单元格的数字格式是创建、修改和格式化Excel文档的关键步骤之一&#xff0c;它不仅确保了数据的正确表示&#xff0c;还能够增强数据的可读性和专业性。正确的数字格式可以帮助用户更直观地理解数值的意义&#xff0c;减少误解&#xff0c;并且对于自动化报告生成、财…...

编程日记 2025/9/20 18:38:55

6.2 MapReduce工作原理

MapReduce工作原理涉及将大数据集分割成小块并行处理。Map任务读取数据块并输出中间键值对&#xff0c;而Reduce任务则处理这些排序后的数据以生成最终结果。MapTask工作包括读取数据、应用Map函数、收集输出、内存溢出时写入磁盘以及可选的Combiner局部聚合。ReduceTask工作则…...

编程日记 2025/9/21 19:51:35

C语言指针

1&#xff0c;指针是什么 指针是内存中一个最小内存单元&#xff08;一个字节&#xff09;的编号&#xff0c;也就是地址通常口语中说的指针&#xff0c;通常是指指针变量也就是用来存放内存中地址的变量 每个内存单元都有一个地址&#xff0c;这个地址不需要存起来&#xff0…...

编程日记 2025/9/22 1:56:50

前端(async 和await)

1 async async 将 function 变为成为 async 函数 ●async 内部可以使用 await&#xff0c;也可以不使用&#xff0c;因此执行这个函数时&#xff0c;可以使用 then 和 catch 方法 ●async 函数的返回值是一个 Promise 对象 ●Promise 对象的结果由 async 函数执行的返回值决…...

编程日记 2025/9/20 16:02:03

打造高效的HIS与DAT文件解析工具

在工业数据采集和存储中&#xff0c;HIS 和 DAT 文件是非常常见的二进制数据格式。然而&#xff0c;解析这些固定块大小的二进制文件并将其转换为易读的 CSV 格式并非易事。本文将深入讲解如何使用 Python 和 PyQt5 打造一款图形化工具&#xff0c;轻松解析和转换这些文件&…...

编程日记 2025/9/18 12:45:08

YOLO系列：二、基于yolov8和labelme制作数据集及模型训练

YOLO系列&#xff1a;二、基于yolov8和labelme制作数据集及模型训练 1.新建一个项目1.数据集标注及类型转换1. 1 使用labelme进行数据标注1.1.1打开labelme1.1.2图像标注及存储 1. 2 将数据集转换成yolo类型 2.模型训练的配置文件2. 1打开labelme标注图像2.1.1三级目录 3.模型训…...

编程日记 2025/9/22 15:22:44

PHP搭建环境

一、安装apache 1、获取Apache安装软件 2、双击安装即可：指定对应的路径：E：server/apache 3、选择安装模式：使用自定义模式 4、选择安装位置 二、Apache的目录结构说明 三、Httpd.exe的详细应用 1、服务器进程：运行之后才能够工作...

编程日记 2025/9/21 23:43:54

LeetCode hot100-69-N

https://leetcode.cn/problems/valid-parentheses/description/?envTypestudy-plan-v2&envIdtop-100-liked 20. 有效的括号 已解答 简单 相关标签 相关企业 提示 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#x…...

编程日记 2025/9/21 16:32:58

14：00面试，14：06就出来了，问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到5月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…...

编程日记 2025/9/21 14:43:55

ubuntu20.04复现 Leg-KILO

这里写目录标题 opencv版本问题下载3.2.0源代码进入解压后的目录创建构建目录运行 CMake 配置 配置时指定一个独立的安装目录&#xff0c;例如 /opt/opencv-3.2&#xff1a;出错&#xff1a; 使用多线程编译错误1&#xff1a; stdlib.h: 没有那个文件或目录错误2&#xff1a;er…...

编程日记 2025/9/20 13:04:44

Redis应用—1.在用户数据里的应用

大纲 1.社区电商的业务闭环 2.Redis缓存架构的典型生产问题 3.用户数据在读多写少场景下的缓存设计 4.热门用户数据的缓存自动延期机制 5.缓存惊群与穿透问题的解决方案 6.缓存和数据库双写不一致问题分析 7.基于分布式锁保证缓存和数据库双写一致性 8.缓存和数据库双写…...

编程日记 2025/9/21 21:36:34

MySQL InnoDB 中的数据页

文章目录 1. 数据库的存储结构概述1.1 表空间&#xff08;Tablespace&#xff09;1.2 段&#xff08;Segment&#xff09;1.3 区&#xff08;Extent&#xff09;1.4 页&#xff08;Page&#xff09; 2. InnoDB 数据页的深入解析2.1 数据页的物理结构2.2 数据页中的行存储2.3 数…...

编程日记 2025/9/20 19:09:33

React Fiber

React Fiber 是 React 16 引入的全新重写的协调&#xff08;Reconciliation&#xff09;算法的实现&#xff0c;旨在改善 React 的更新机制和性能&#xff0c;尤其是在复杂应用和大量更新的场景下。它使得 React 更加灵活、可调度&#xff0c;能够实现优先级控制和中断更新等特…...

编程日记 2025/9/22 5:22:23

hive 小文件分析

1、获取fsimage文件&#xff1a; hdfs dfsadmin -fetchImage /data/xy/ 2、从二进制文件解析&#xff1a; hdfs oiv -i /data/xy/fsimage_0000000019891608958 -t /data/xy/tmpdir -o /data/xy/out -p Delimited -delimiter “,” 3、创建hive表 create database if not exists…...

编程日记 2025/9/22 6:50:54

大模型运用-Prompt Engineering（提示工程）

什么是提示工程 提示工程 提示工程也叫指令工程&#xff0c;涉及到如何设计、优化和管理这些Prompt&#xff0c;以确保AI模型能够准确、高效地执行用户的指令&#xff0c;如&#xff1a;讲个笑话、java写个排序算法等 使用目的 1.获得具体问题的具体结果。&#xff08;如&…...

编程日记 2025/9/21 12:12:32

Linux（网络协议和管理）

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

编程日记 2025/9/20 19:49:14

前端项目打包部署

打包和部署前端项目是将开发环境中的代码转化为生产环境可直接运行的静态文件&#xff0c;并将其部署到服务器上的过程。 # 项目打包 pnpm run build# 上传文件至远程服务器 将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。# nginx.cofig…...

编程日记 2025/9/20 11:17:50

Linux驱动开发（12）：中断子系统–按键中断实验

本章我们以按键为例讲解在驱动程序中如何使用中断&#xff0c; 在学习本章之前建议先回顾一下关于中断相关的裸机部分相关章节&#xff0c; 这里主要介绍在驱动中如何使用中断&#xff0c;对于中断的概念及GIC中断控制器相关内容不再进行讲解。 本章配套源码和设备树插件位于“…...

编程日记 2025/9/22 10:26:50

C语言(函数指针与指针函数)

函数指针 定义&#xff1a;函数指针本质上是指针&#xff0c;它是函数的指针&#xff08;定义了一个指针变量&#xff0c;变量中存储了函数的地 址&#xff09;。函数都有一个入口地址&#xff0c;所谓指向函数的指针&#xff0c;就是指向函数的入口地址。这里函数名就代 表入…...

编程日记 2025/9/22 2:29:22

中国计算机学会计算机视觉专委会携手合合信息举办企业交流活动，为AI安全治理打开“新思路”

近期&#xff0c;《咬文嚼字》杂志发布了2024年度十大流行语&#xff0c;“智能向善”位列其中&#xff0c;过去一年时间里&#xff0c;深度伪造、AI诈骗等话题屡次登上热搜&#xff0c;AI技术“野蛮生长”引发公众担忧。今年9月&#xff0c;全国网络安全标准化技术委员会发布了…...

编程日记 2025/9/20 11:15:23