windows vue3 安装及搭建

最新推荐文章于 2025-06-20 19:56:58 发布
最新推荐文章于 2025-06-20 19:56:58 发布
阅读量2.9k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq273161816/article/details/107411194
本文详细介绍了在Windows系统中安装Vue3的步骤，包括从下载Node.js到设置自定义的nodejs cache缓存路径和prefix全局路径，再到调整系统环境变量，最后通过命令行安装Vue3。确保在全局范围内可以正常使用Vue3及其相关命令。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

windows vue3 安装及搭建

1 安装node

百度网盘下载node-v14.5.0-x64.msi
提取码：49y7
node.js官方下载地址

1.1安装node.js

nodejs安装好之后，通过npm下载的全局模块默认会安装到C:\Users\用户名\AppData\Roaming\npm中,放在系统盘会造成系统卡顿且不便于集中管理,通过下面的步骤修改下默认安装路径:
在nodejs安装路径下，新建node_global和node_cache两个文件夹
在这里插入图片描述

1.2 设置nodejs cache缓存路径

以管理员身份运行CMD,输入如下指令:

npm config set cache "D:\node\node_cache"

1.3 设置nodejs prefix全局路径

以管理员身份运行CMD,输入如下指令:

npm config set prefix "D:\node\node_global"

2 设置系统环境变量

设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径

2.1.新增NODE_PATH用户变量

在这里插入图片描述

2.3修改系统变量PATH,新增node环境变量

在这里插入图片描述

3.安装vue3

以管理员身份运行CMD,输入如下指令:

npm config set registry https://registry.npm.taobao.org

cnpm install -g @vue/cli
qq273161816
关注
Vue3-win7搭建vue3环境
o396032767的博客
08-25 3073
vue3 win7下搭建环境并启动demo项目。
Windows下搭建VUE开发环境
yjkhtddx的专栏
10-17 2737
VS Marketplace 链接: https://marketplace.visualstudio.com/items?VS Marketplace 链接: https://marketplace.visualstudio.com/items?使用npm配置缓存和全局安装路径(注：配置环境变量时已经配置全局安装路到Path)环境变量，设置成nodejs的安装路径，我的是。我使用的是腾讯云镜像站。
Windows10 安装 Vue3
苹果2008的博客
01-12 4078
一、安装Node.js 下载Node.js，Node.js的官网下载地址为Download | Node.jshttps://nodejs.org/en/download/下载完成后，双击.msi文件，将默认安装路径按照喜好修改，其余的设置默认即可，不需要勾选安装的附加选项。 二、更新Node.js 1.以管理员身份运行命令提示符工具，输入"node -v"，出现版本号，说明node.js安装成功。 2.输入"npm -v"查看npm版本号 3.对npm进行更新，"npm -g install n
Vue3 安装
最新发布
likuoelie的博客
06-20 737
Vue3 是一种渐进式 JavaScript 框架，设计初衷是易于集成和使用。安装方式主要包括本地开发环境设置和 CDN 方式。调研发现，官方推荐使用create-vue创建项目，基于 Vite 工具，适合现代开发需求。而 CDN 方式适合快速原型或简单测试。从多个中文教程和官方文档来看，安装步骤清晰，但在中国大陆用户可能面临网络速度问题，因此 cnpm 被广泛推荐作为 npm 的镜像加速工具。
window安装vue3
Feel_cat的博客
12-17 472
CSS Pre-processors CSS预处理器，预处理器：比如要用 sass 或者 cssNext 就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成 css。vue init命令是vue-cli2.x提供创建Vue项目的方式，可以使用github上面的一些模板来初始化项目。vue creat命令是vue-cli3.x提供创建Vue项目的方式，模板是固定的，模板选项可自由配置。①安装 vue.js： npm install vue -g // -g为全局安装。
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 12万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
Vue3 安装与配置 详细教程
majingbobo的博客
10-28 2万+
Vue环境搭建及项目创建
vue学习3 安装
weixin_74929756的博客
07-02 319
官网下载地址这里选择的是Windows Installer(.msi) 64-bit下载好后，双击下载的安装包点next建议更改为自己想要的的后面安装目录，然后点next这里不用勾选，直接点next然后finish安装完成后，检查一下是否安装成功。打开cmd，输入如下指令。npm -v输出了版本号就说明安装成功了。
windows下vue-cli及webpack搭建安装环境
08-30
Windows 下 Vue-cli 及 Webpack 搭建安装环境 在现代 Web 开发中，Vue-cli 和 Webpack 是两个非常重要的工具，前者是 Vue.js 的脚手架工具，可以快速构建 Vue 项目，而后者是目前最流行的模块打包工具。本文将详细...
手把手搭建安装基于windows的Vue.js运行环境
12-10
3. **安装 Vue.js**：使用 cnpm 安装 Vue.js，输入 `cnpm install vue`。等待安装完成，成功后会看到相应的提示。 4. **安装 Vue-cli**：Vue-cli 是 Vue.js 的命令行工具，用于快速搭建项目结构和配置。使用 `cnpm ...
windows安装node.js和vue3.x
bigboss_666的博客
05-04 1290
在F:\nodejs\node_global【你安装的目录】文件夹中可以找到cnpm.cmd文件，使用命令提示符cmd进入目录，执行cnpm -v检查是否安装成功，则成功执行。因为npm的本地仓库默认在系统C盘占用C盘空间，所以我们希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，把这2个目录通过命令移到我们安装目录上。安装完成后，打开cmd，可以使用node -v和npm -v查看版本号，恭喜你node已经安装好了，接下来进行配置，优化。3，进入node安装目录，手动新建下面两个目录。
win 10 安装VUE3
小子宝丁的博客
06-01 383
安装VUE3 npm install -g @vue/cli # OR yarn global add @vue/cli 我是win10使用 npm 安装比较还是可以的。
vue3安装配置
M_Teng的博客
08-18 866
安装nodejs+npm+cnpm+webpack+vue+vue-cli环境
vue 3安装
南城猿的博客
03-04 432
一、简介 1.什么是Vue？ 1.1 .VUE是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建。声明式渲染。 1.2.声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。 1.3.响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
vue3—win7搭建vue3环境
yangchangfu2016的博客
05-06 1615
本文主要介绍window7环境下搭建vue3开发环境，旨在减轻小伙伴们学习vue3入门难度，希望帮到大家！
windows安装vue
s_daqing的博客
03-02 574
将【%NODE_HOME%】和【%NODE_HOME%\global】 添加进去，点击新建并输入进去，添加完成后点击确定。在nodejs目录下新建两个文件夹node_global和node_cache。填写变量名和变量值（你的Node.js安装路径），填写完成后点击确定。创建完毕后，输入以下命令修改npm默认安装目录与缓存日志目录的位置。4、修改npm默认安装目录与缓存日志目录的位置。node -v ：查看nodejs的版本。npm -v ：查看npm的版本。-g：安装到全局文件夹。
Vue 3 安装及环境配置
kingdom_C的博客
03-10 4万+
Vue 3 安装及环境配置
VUE3环境搭建
evelol7的博客
02-16 1483
最近准备用Vue编写一点前端页面，我在前端一直是个小白，之前用的Vue2写了几个页面，现在已经是VUE3了，重新安装下环境开始。
手把手教你创建并启动一个Vue3项目（Windows版）
徐泗空的博客
06-19 6182
1、因为npm的资源默认采用国外的，国内执行对应的安装口令会比较慢，所以我们可以把npm资源切换到国内，这样安装框架的速度就会提升。4、验证安装npm是否成功，npm是Node中自带的打包工具，输入npm -version，输出npm版本号即表示安装成功。2、最后如上图显示，我们就完成我们VUE脚手架的安装了，我们在命令窗口用口令查看当前脚手架版本。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值