[Vue] 从零开始使用 Vite 创建 Vue 项目

news2024/11/15 3:32:07

📚 一、安装 Node.js

Node.js 是一个运行 JavaScript 代码的 JavaScript 运行时,它允许我们在服务器端运行 JavaScript 代码。以下是安装 Node.js 的步骤:

  1. 🌐 访问 Node.js 国内网站:https://nodejs.cn/
    请添加图片描述

  2. 📦 选择 LTS(长期支持版)或 Current(最新特性版)。对于大多数用户,LTS 版本是更稳定的选择。

  3. 💾 下载适合你操作系统的安装程序,并按照安装向导的提示进行安装。在大多数情况下,你可以接受默认设置。

  4. 🔧 安装完成后,打开一个新的命令行窗口(终端),输入以下命令来验证安装:

node --version
npm --version

📁 二、创建一个新的项目目录

创建一个新的目录来存放我们的 Vite 项目:

  1. 📂 打开终端,导航到你想创建项目的位置。
    请添加图片描述
  2. 🏗️ 创建一个新目录并进入:
mkdir my-vite-project
cd my-vite-project

请添加图片描述

🛠️ 三、初始化 Vite 项目

使用 Vite 创建一个新项目

  1. 🚀 在终端中运行以下命令:
npm create vite@latest
  1. 📝 输入项目名称,选择 Vue 作为框架,并选择 JavaScript 或 TypeScript 作为语言变体。
    请添加图片描述
    请添加图片描述
    请添加图片描述

🔗 四、安装项目依赖

  1. 📍 进入项目目录:
cd your-project-name
  1. 📚 安装项目依赖:
npm install

请添加图片描述

🚀 五、启动开发服务器

  1. 💡 运行以下命令启动 Vite 开发服务器:
npm run dev

请添加图片描述

  1. 🌐 访问 http://localhost:5173 在你的浏览器中查看项目。
    请添加图片描述

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

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

相关文章

【如何在 Windows 10 主机上通过 VMware 安装 Windows 11 虚拟机,并共享主机网络】

环境说明 主机操作系统:Windows 10虚拟机操作系统:Windows 11虚拟机软件:VMware 步骤一:确保主机(Windows 10)网络连接正常 启动网络加速软件:在主机上启动软件,确保主机可以正常访…

基于LSTM的温度时序预测

1.背景 本文接【时序预测SARIMAX模型】 一文,采用LSTM模型进行平均温度数据预测。具体的背景和数据分析就不做重复说明,感兴趣可以去看上文即可。 2.LSTM模型 RNN(Recurrent Neural Network,循环神经网络)是一种特殊…

AI驱动TDSQL-C Serverless 数据库技术实战营-ai学生选课系统数据分析

以前用过腾讯的TDSQL-MYSQL,TBASE,最近了解到TDSQL-C serverless,本次试验结合的AI大模型驱动来学习实战TDSQL-C serverless,体验服务化的数据库,和一句简单描述进行学生选课系统数据分析; 我使用的分析数据…

C++初阶-list用法总结

目录 1.迭代器的分类 2.算法举例 3.push_back/emplace_back 4.insert/erase函数介绍 5.splice函数介绍 5.1用法一:把一个链表里面的数据给另外一个链表 5.2 用法二:调整链表当前的节点数据 6.unique去重函数介绍 1.迭代器的分类 我们的这个迭代器…

【alluxio编译报错】Some files do not have the expected license header

Some files do not have the expected license header 快捷导航 在开始解决问题之前,大家可以通过下面的导航快速找到相关资源啦!💡👇 快捷导航链接地址备注相关文档-ambaribigtop自定义组件集成https://blog.csdn.net/TTBIGDA…

【Elasticsearch系列十八】Ik 分词器

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

通信入门系列书籍推荐一:通信原理和通信原理学习辅导

微信公众号上线,搜索公众号小灰灰的FPGA,关注可获取相关源码,定期更新有关FPGA的项目以及开源项目源码,包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 本节目录 一、背景 二、通信原理 …

石岩体育馆附近的免费停车场探寻

坐标:石岩体育馆侧的石清大道断头路, 如果运气好的话,遇到刚好有车开出的话,我觉得可以作为中长期的免费停车点 第一次路过的时候,把我震惊了,我一直以为石岩停车位紧张比市区还严重,因为石岩大部分为统建楼…

python画图|图像背景颜色设置

python画图出来的默认图形背景是白色,有时候并不适合大家表达想要表达的意思。 因此,我们很有必要掌握自己设置图形背景颜色的技巧。 【1】官网教程 首先请各位看官移步官网,看看官网如何设置,下述链接可轻松到达: …

Lubuntu电源管理

lxqt-config-powermanagement 打开托盘图标 Show icon 电源管理 电源管理管理笔记本电脑电池的低电量、关闭笔记本电脑盖的操作以及计算机长时间闲置时应采取的措施。 用法 LXQt 电源管理会监控您的电池、笔记本电脑盖、空闲情况,以及当您按下电源或睡眠按钮时会发…

IS-ISv6单拓扑存在的问题

文章目录 IS-ISv6单拓扑配置单拓扑存在的问题解决 IS-ISv6单拓扑B站视频传送门 IS-ISv6单拓扑 配置 R1:sy sy R1 ipv6 inter g0/0/0 ip add 12.1.1.1 24 ipv6 enable ipv add 2001:12::1 64 inter loop0 ip add 1.1.1.1 32 ipv6 enable ipv address 2002::1 128isi…

30个GPT提示词天花板,一小时从大纲到终稿

PROMPT 1 中文:构建研究背景与意义,阐述研究问题的紧迫性和重要性。 English: Establish the research background and significance, elucidating the urgency and importance of the research question. 中文:设计研究目的与目标&#xff…

TDOA方法求二维坐标的MATLAB代码演示与讲解

引言 时间差定位(Time Difference of Arrival, TDOA)是一种用于确定信号源位置的技术,广泛应用于无线通信、声学定位等领域。通过测量信号到达多个接收器的时间差,可以计算出信号源的二维坐标。本文将通过MATLAB代码演示如何使用TDOA方法来求解二维坐标。 TDOA原理 TDOA…

LeetCode题练习与总结:回文链表--234

一、题目描述 给你一个单链表的头节点 head ,请你判断该链表是否为回文链表。如果是,返回 true ;否则,返回 false 。 示例 1: 输入:head [1,2,2,1] 输出:true示例 2: 输入&#x…

CocosCreator 3.x 实现角色移动与加载时动态屏幕边缘检测

效果 思路 通过cc.view全局单例 View 对象获取屏幕尺寸加载时根据屏幕尺寸动态计算上下左右边缘 代码实现 import { _decorator, Component, EventTouch, Input, input, Node, view } from cc; const { ccclass, property } _decorator;/*** 玩家控制脚本*/ ccclass(Player…

Linux之实战命令03:stat应用实例(三十七)

简介: CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【…

树及二叉树(选择题)

树 在树中,总结点数为所有结点的度和再加一 5、设一棵度为3的树,其中度为2,1.0的结点数分别为3,1,6。该树中度为3 的结点数为_。 二叉树 设二叉树的所有节点个数为N,度为零的结点(叶子结点…

P9235 [蓝桥杯 2023 省 A] 网络稳定性

*原题链接* 最小瓶颈生成树题,和货车运输完全一样。 先简化题意, 次询问,每次给出 ,问 到 的所有路径集合中,最小边权的最大值。 对于这种题可以用kruskal生成树来做,也可以用倍增来写,但不…

数字基带之相移键控PSK

1 相移键控定义 相移键控是指用载波的相移位变化来传递信号,不改变载波的幅度和频率,可用下面的公式表示。 是载波的幅度,是载波的角频率,是载波的瞬时相位,是载波的初始相位。如果需要调制的信号为1bit的二进制数&am…

spark读取数据性能提升

1. 背景 spark默认的jdbc只会用单task读取数据,读取大数据量时,效率低。 2. 解决方案 根据分区字段,如日期进行划分,增加task数量提升效率。 /*** 返回每个task按时间段划分的过滤语句* param startDate* param endDate* param …