windows下使用vite搭建vue开发环境

news2025/3/13 3:26:02

windows下使用vite搭建vue开发环境

  • 1 下载安装配置NodeJS
    • 1.1 下载
    • 1.2 安装
    • 1.3 配置
    • 1.4 npm镜像加速配置
    • 1.6 设置环境变量
  • 2 Vite安装

1 下载安装配置NodeJS

1.1 下载

下载地址:https://nodejs.cn/download
到NodeJS官网,选择Windows安装包即可。
在这里插入图片描述

1.2 安装

  1. 在安装前先在安装路径下新建安装目录,nodejs(node安装目录)
  2. 安装时建议安装到其他盘而非系统盘,后续就一直点击next即可,这里选择安装到 D:\Software\Node\nodejs
    安装完后,可在cmd命令行窗口,输入node -v查看nodejs版本
C:\Users\liuch>node -v
v16.19.1

1.3 配置

新建 node_global(全局模块)node_cache(缓存文件)

配置nodejs的缓存文件夹和全局模块存放文件夹

  • nodejs的缓存文件夹
npm config set cache "D:\Software\Node\node_cache"
  • 全局模块存放文件夹
npm config set prefix "D:\Software\Node\node_global"

1.4 npm镜像加速配置

设置淘宝镜像的两个方法

  1. 不改变原来的名称 只换下载资源的地址
npm config set registry https://registry.npm.taobao.org
  1. 使用cnpm 代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org

1.6 设置环境变量

在这里插入图片描述

2 Vite安装

参考:Vite官方中文文档

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

  • NPM方式
npm create vite@latest
  • Yarn方式
yarn create vite
  • PNPM方式
pnpm create vite

还可以通过附加的命令行选项直接指定项目名称和想要使用的模板。例如,要构建一个 Vite + Vue 项目,运行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

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

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

相关文章

网络协议-UDP vs TCP, HTTP2.0和3.0

目录 TCP vs UDP Internet协议群(TCP/IP协议群) 传输层和网络层 User Data Diagram(UDP) 连接 重发(校验) UDP不保证顺序 思考:看了上面的几点,UDP没有虚拟连接、不校验数据、…

Vue ElementUI Axios 前后端案例(day01) 之Vue

前言js 问js是什么,他有什么作用,与html和css的区别是什么 JavaScript(简称JS)是一种脚本语言,用于在网页上实现交互效果、动态效果和动态数据更新等功能。它是一种解释性语言,需要在浏览器中解释和执行。…

【Paper Note】Swin Transformer: Hierarchical ViT using Shifted Windows

Swin Transformer: Hierarchical ViT using Shifted Windows 概述核心思想整体结构名词解释与vit区别 模型处理过程概括Patch EmbeddingBasicLayerPatch MergingSwin Transform BlockWindow AttentionShifted Window Attention小结 模型使用及代码模型使用环境配置SwinT 代码Pa…

跨境卖家都要知道的:对话式销售

买家可以用他们的指纹登录大多数东西,并通过与它交谈来管理他们的日历。这些人不会填写一份表格,如果他们填写的字段越多,表格的长度就会越长。如果他们知道只会受到骚扰,他们当然不会下载某些东西。 相反,他们更喜欢…

[Linux系统]系统安全及应用一

系统安全及应用一、账号安全基本措施1.1系统账号清理1.1.1将非登录用户的shell设为/sbin/nologin1.1.2锁定长期不使用的账号1.1.3删除无用的账号1.1.4锁定账号文件文件chattr1.1.5查看文件校验和md5sum1.2密码安全控制1.2.1设置密码有效期1.3历史命令限制1.3.1 减少记录命令的条…

5GHz无线局域网系统模拟

移动电视双天线分集接收技术 随着DVB-T在手机电视、车载电视、楼宇电视、地铁电视等户外广播领域内的发展,在这些接收范围内,多径衰落、多普勒频移等小范围衰落是不可避免的问题,解决这些衰落和干扰成为倍受关注的问题。为了解决衰落&#x…

rk3568 点亮LCD (BT656 BT1120)

rk3568 适配 BT656/BT1120 BT.656 TX 和 BT.1120 TX,是一种并行输出接口,而 Camera 对应的是 BT.656 RX和 BT.1120 RX,是一种并行输入接口,两则在协议上是一致的。与同为并口的RGB非常像,在rk3568 芯片上RGB和BT656/B…

【jenkins】Jenkins连接 Gitlab实现 push代码自动构建

目录 一、安装插件 二、构建任务 三、为任务配置触发器 四、到gitlab进行设置webhooks 4.1 设置网络 4.2 到jenkins对应项目的源码库 4.3 测试 4.3.1 点击测试--标签推送事件 4.3.2 点击编辑 一、安装插件 持续部署的第一步需要检查是否安装gitlab插件: gitla…

Doris(9):删除数据(Delete)

Delete不同于其他导入方式,它是一个同步过程。和Insert into相似,所有的Delete操作在Doris中是一个独立的导入作业,一般Delete语句需要指定表和分区以及删除的条件来筛选要删除的数据。 Doris 目前可以通过两种方式删除数据: DE…

记录-JavaScript常规加密技术

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 当今Web开发中,数据安全是一个至关重要的问题,为了确保数据的安全性,我们需要使用加密技术。JavaScript作为一种客户端编程语言,可以很好地为数据进行加…

Spring Boot 安全

目录 1.概述 2.token 2.1.理论 2.2.使用 3.JWT 3.1.理论 3.2.使用 4.oauth 5.Spring Security 5.1.概述 5.2.基本认证授权 5.3.加密 1.概述 在后端来说,安全主要就是控制用户访问,让对应权限的用户能访问到对应的资源,主要是两点…

AOP通知中获取数据

AOP通知中获取数据 之前我们写AOP仅仅是在原始方法前后追加一些操作,接下来我们要说说AOP中数据相关的内容,我们将从获取参数、获取返回值和获取异常三个方面来研究切入点的相关信息。 获取切入点方法的参数:所有的通知类型都可以获取参数 …

Vulhub开源漏洞靶场用Java远程访问

事件起因,被迫参加某竞赛,中途发现,全员摸鱼,遂一起摸鱼Vulhub是一个面向大众的开源漏洞靶场,无需docker知识,简单执行一条命令即可编译、运行一个完整的漏洞靶场镜像。 Installation 在Ubuntu 20.04下安…

JVM 垃圾回收详解之内存分配和回收原则+死亡对象判断方法

前言 当需要排查各种内存溢出问题、当垃圾收集成为系统达到更高并发的瓶颈时,我们就需要对这些“自动化”的技术实施必要的监控和调节。 堆空间的基本结构 Java 的自动内存管理主要是针对对象内存的回收和对象内存的分配。同时,Java 自动内存管理最核…

【STM32】基础知识 第七课 存储器映射 寄存器映射

【STM32】基础知识 第七课 存储器映射 & 寄存器映射 STM32 寻址范围存储器映射存储器功能划分 (F1 为例)Block 0Block 1Block 2寄存器映射 寄存器映射 (F1 为例)寄存器映射举例寄存器地址计算GPIO 外设基地址及偏移量寄存器地址及偏移量寄存器地址计算过程 使用结构体映射寄…

《2-数组》

数组 1.简介: 数组(Array)是一种固定长度的存储相同数据类型在连续内存空间中的数据结构 引出:[索引 (Index)]----元素在数组中的位置 2.初始化 写法:一般用到无初始值、给定初始值 在不给定…

中国制造业连续13年全球第一,MES管理系统,打造竞争新优势

根据工业和信息化部最近发布的数据,在2022年,中国的制造业增加值在全球的占比接近30%,制造业规模已连续13年位居世界第一。根据国家统计局的最新数字,一到二月份,我国的生产值与去年同期相比上升了2.1&…

实现声明式锁,支持分布式锁自定义锁、SpEL和结合事务

目录 2.实现 2.1 定义注解2.2 定义锁接口2.3 锁的实现 2.3.1 什么是SPI2.3.2 通过SPI实现锁的多个实现类2.3.3 通过SPI自定义实现锁3.定义切面 3.1 切面实现3.2 SpEL表达式获取动态key3.3 锁与事务的结合4.测试 4.1 ReentrantLock测试4.2 RedissonClient测试4.3 自定义锁测试5…

移动硬盘如何分区?教您快速解决!

案例:怎么对移动硬盘进行分区? 【我平常找一个文件需要耗费很长时间,十分麻烦。我现在想通过对移动硬盘进行分区的方式,整理好我的文件,方便使用时查找。有没有人知道移动硬盘怎么分区?教教我!…

深入浅出JS定时器:从setTimeout到setInterval

前言 当谈到 JavaScript 编程语言最基本的概念时,定时器就是一个必须掌握的知识点。在编写网站时,你经常会遇到需要在一定时间间隔内执行一些代码的情况。这时候,JavaScript 定时器就可以派上用场了。 什么是定时器? JS 定时器是…