Vue+Vite 组件开发的环境配置(超级简单)

vite是什么

Vite 是一个现代化的前端构建工具和开发服务器,它特别适用于构建大型的单页面应用(SPA)。Vite 旨在提供极快的冷启动速度,并且能够即时地(几乎实时地)更新模块,这得益于其利用原生 ES 模块(ESM)导入的架构。

要使用 Vite,开发者通常需要按照以下步骤操作:

  1. 安装 Node.js 和 npm(Node 包管理器)。
  2. 使用 npm 或 Yarn 创建一个新的 Vite 项目(通常使用 Vite 提供的脚手架工具)。
  3. 在项目目录中编写代码,包括 JavaScript/TypeScript、CSS/SCSS、Vue/React 组件等。
  4. 使用 Vite 提供的开发服务器来运行和调试项目。
  5. 当项目开发完成后,使用 Vite 的构建命令来生成用于生产环境的静态资源,并将其部署到服务器上

一、安装node.js

Node.js® 是一个免费、开源、跨平台的 JavaScript 运行时环境, 它让开发人员能够创建服务器 Web 应用、命令行工具和脚本。在任何地方运行 JavaScript

Node.js — 在任何地方运行 JavaScript官网直接打开下载即可

一直点击Next即可

二、如何检查我们是否安装成功

首先我们打开一个空的文件夹(接下来要存放vue project的地方)在搜索框输入cmd按enter打开cmd

我们在cmd界面可以查看我们下载的node版本以及npm版本

输入npm get registry可以查看我们的镜像源

【设置淘宝镜像源(默认镜像源是国外网址,国内访问经常失败,所以要设置淘宝镜像源)】
npm config set registry https://registry.npmmirror.com/

下一步

【安装pnpm包管理工具】
npm install -g pnpm (npm install -g xxxx  全局安装工具包,可以直接在命令行使用,否则无法使用)

这样就我们安装完毕了

三、创建我们的脚手架

创建脚手架:pnpm create vue 

会让我们来输入名称,我们可以直接按照默认来就行

以下全部选否即可

接着按照顺序输入它给的三条命令即可

 cd vue-project
  pnpm install
  pnpm dev

最后它给我们一个网址,我们直接复制粘贴然后使用谷歌浏览器直接打开即可

这样我们的脚手架就搭建完成啦

注意:打开网页时,不要关闭cmd窗口。

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

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

相关文章

vue拖拽图片

这是我封装的组件大家直接用就好 我的gitee仓库地址 拖拽(父子) 刘志辉/vue功能 - 码云 - 开源中国 //使用页面参考文档 //标签内 :imgSrc"../img/tibet-1.jpg" <!-- 设置图片路径 --> dragstart"handleDragStart" <!-- 监听拖拽开始…

GNU/Linux - make 60s介绍

Learn make in 60 seconds. A programmer needs a build system. 想想你要手动输入编译命令编译每一个源文件&#xff0c;而且要正确添加和管理各个option&#xff0c;是很麻烦的。有各种用来帮助你build的工具&#xff0c;比如ant、make、maven、rake等。Make就是最通用的一…

C05S01-Web基础和HTTP协议

一、Web基础 1. Web相关概念 1.1 URL URL&#xff08;Uniform Resource Locator&#xff0c;统一资源定位符&#xff09;&#xff0c;是一种用于在互联网上标识和定位资源的标准化地址&#xff0c;提供了一种访问互联网上特定资源的方法。URL的基本格式如下所示&#xff1a;…

Spring+Mybatis 整合所需准备

文章目录 SpringMybatis SpringMybatis 准备pom.xml 项目所需jar文件 <spring.version>4.0.2.RELEASE</spring.version> <!-- spring框架包 --><dependency><groupId>org.springframework</groupId><artifactId>spring-test</a…

Spring中Bean的作用域深入剖析与技术实践

前言 Spring框架作为Java企业级应用开发中的中流砥柱&#xff0c;提供了强大的依赖注入&#xff08;DI&#xff09;和面向切面编程&#xff08;AOP&#xff09;等功能。在Spring框架中&#xff0c;Bean的作用域&#xff08;Scope&#xff09;是一个非常重要的概念&#xff0c;…

从仪表盘探索 MongoDB 关键指标

这是 MongoDB 监控系列文章的第七篇&#xff0c;前面几篇文章的链接如下&#xff1a; MongoDB 监控&#xff08;一&#xff09;MongoDB 监控&#xff08;二&#xff09;MongoDB 监控&#xff08;三&#xff09;MongoDB 监控&#xff08;四&#xff09;MongoDB 监控&#xff08…

mac安装php和xdebug调试

要在Mac上安装PHP 7.4&#xff0c;你可以通过几种方式来完成&#xff0c;但鉴于PHP7.4官方已不再维护&#xff0c;并且Homebrew默认仓库中不再提供此版本&#xff0c;我们需要从第三方仓库或直接从源代码进行安装。本文以brew方式安装&#xff0c;如果安装的是8.0以上&#xff…

UIlicious - 自动化端到端测试

在现代软件开发中&#xff0c;测试自动化已然成为产品交付质量的基石。而端到端测试&#xff08;E2E&#xff09;&#xff0c;作为验证整个应用流畅运行的关键&#xff0c;常常是测试工作中最具挑战性的一环。这时&#xff0c;一款简单高效的自动化测试工具——UIlicious&#…

新一代零样本无训练目标检测

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;编程探索专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年12月2日21点02分 神秘男子影, 秘而不宣藏。 泣意深不见, 男子自持重, 子夜独自沉。 论文链接 点击开启你的论文编程之旅h…

Python_Flask01

所有人都不许学Java了&#xff0c;都来学Python&#xff01; 如果不来学的话请网爆我的老师---蔡老师 Flask的前世姻缘 我不知道&#xff0c;没啥用&#xff0c;要学好这个框架&#xff0c;其实多读书&#xff0c;多看报就行了&#xff0c;真心想了解的话&#xff01; Welcom…

微信小程序版小米商城的搭建流程详解!

很多初学微信小程序语法的同学&#xff0c;可能不知道如何布局和搭建一个项目&#xff0c;下面我将讲解初学者如何搭建项目和注意事项。 目录 一、 app.json的配置 二、引入vant 三、主页banner携带参数跳转 四、点击商品项跳转详情页 一、 app.json的配置 {"pages&q…

Neo4j启动时指定JDK版本

项目使用jdk1.8&#xff0c;同时需要安装neo4j5.15版本&#xff0c;使用jdk17. 1.mac或者liunx&#xff0c;找到neo4j目录bin的下neo4j文件 设置JAVA_HOME: 2.windows,找到bin下面的neo4j.bat文件 set "JAVA_HOME{JDK文件目录}" 重启后生效。

AI大模型驱动数据分析:利用自然语言实现数据查询与可视化(1)

在当今AI驱动的时代&#xff0c;数据分析已成为各行各业不可或缺的能力。然而&#xff0c;传统的数据分析流程通常需要掌握SQL、数据处理和可视化等多项专业技能&#xff0c;这对非技术背景的业务人员来说是一个不小的挑战。 想象一下&#xff0c;当数据中心的负责人打开手机时…

汽车总线协议分析-FlexRay总线

随着汽车智能化发展&#xff0c;汽车增加安全性和舒适体验的功能增多&#xff0c;用于实现这些功能的传感器、ECU的数量也在持续上升&#xff0c;严重阻碍了线控技术的发展。常用的CAN、LIN等总线由于缺少同步性、确定性和容错性不能满足汽车线控系统(X-by-Wire)的要求。因此&a…

flinkSql中累计窗口CUMULATE

eventTime package com.bigdata.day08;import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apache.flink.table.api.bridge.java.StreamTableEnvironment;public class _05_flinkSql_Cumulate_eventTime {/*** 累积窗口 eventTime* …

第二篇:k8s工作流程

我们来看通过deployment部署pod的常规流程&#xff1a; kubectl向apiserver发送部署请求&#xff08;例如使用 kubectl create -f deployment.yml&#xff09;apiserver将 Deployment 持久化到etcd&#xff1b;etcd与apiserver进行一次http通信。controller manager通过watch a…

SPC三种判定准则的算法

1.连续6个点递增或递减 //传入数据列表 //返回连续X个及以上递增或递减的数组下标int n = array.Length; int X = X_in; List<int> regions_start = new List<int>(); List<int> regions_end = new List<int>();if(Open){for (int i = 0; i < n - (…

工业—使用Flink处理Kafka中的数据_ProduceRecord1

1 、 使用 Flink 消费 Kafka 中 ProduceRecord 主题的数据,统计在已经检验的产品中,各设备每 5 分钟 生产产品总数,将结果存入Redis 中, key 值为

Advanced Macro Techniques in C/C++: `#`, `##`, and Variadic Macros

Advanced Macro Techniques in C/C: #, ##, and Variadic Macros 文章目录 Advanced Macro Techniques in C/C: #, ##, and Variadic MacrosIllustrative Examples of Macros Using # and ##Stringification ExampleToken Concatenation ExampleNested Macros Example Key Conc…

python爬虫01

前言 之前的学习不是很努力就间断更新了&#xff0c;现在所有的内容是在具有python基础和web基础上继续更新的。接下来是爬虫和Flask框架共同更新&#xff0c;一起加油吧。 接v&#xff1a;13053025350&#xff08;毕设&#xff0c;小程序&#xff09; 看不懂python基础的可以…