win11下Vue环境搭建（脚手架初始化+项目启动）教程（详解多图）

已于 2023-04-13 09:53:06 修改
阅读量4.8k 收藏 25
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 前端学习 文章标签： vue.js npm 前端
于 2023-02-27 16:58:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46447549/article/details/129243458

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

初学Vue 搭环境快把我整死了QAQ 差点入门即入土

一、下载安装node.js

①下载地址：https://nodejs.org/en/
点击下图所示直接下载，可以得到一个node-v18.14.2-x64.msi文件，直接双击安装

在这里插入图片描述
在这里插入图片描述
②点击next，勾选同意协议，然后next：
在这里插入图片描述

③选择路径，不要装到c盘，然后next再next：
在这里插入图片描述
④复选框不必勾选，next，install：
在这里插入图片描述
⑤完成：

最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue CLI 4 脚手架搭建项目全流程详解
AI架构全栈开发实战笔记
06-01 574
本文旨在提供一个全面的指南，帮助开发者掌握Vue CLI 4的使用方法，理解其核心概念和工作原理，并能够高效地搭建和管理Vue.js项目。核心概念与联系：介绍Vue CLI的基本概念和架构安装与初始化：详细讲解安装和项目创建过程配置详解：深入分析各种配置选项插件系统：探索Vue CLI强大的插件机制项目实战：通过实际案例演示完整流程构建与部署：讲解项目构建和发布的最佳实践Vue CLI：Vue.js官方提供的标准工具链，用于快速搭建Vue项目脚手架。
Win11&Win10配置vue开发环境
qq_31597919的博客
06-09 4272
win11安装搭建vue环境
Windows下搭建VUE开发环境
yjkhtddx的专栏
10-17 2736
VS Marketplace 链接: https://marketplace.visualstudio.com/items?VS Marketplace 链接: https://marketplace.visualstudio.com/items?使用npm配置缓存和全局安装路径(注：配置环境变量时已经配置全局安装路到Path)环境变量，设置成nodejs的安装路径，我的是。我使用的是腾讯云镜像站。
安装vue的教程——Windows Node.js Vue项目搭建
最新发布
hnlucky的博客
06-06 601
本文详细介绍了Vue2项目的搭建过程：1)准备Windows11和Node.js v22.16.0环境；2)创建项目目录并安装Vue CLI 5.0.8；3)通过命令创建和启动Vue2项目；4)访问本地开发服务器；5)使用VSCode进行开发；6)安装路由(Vue-router@3)和状态管理(Vuex@3)等核心依赖；7)项目构建与部署说明。文档还提供了操作截图和常见问题提示，如npm版本升级建议和开发服务器停止方法。
Windows11配置VUE开发环境
源代码杀手的博客
04-07 2124
在 Vue CLI 3 之前，Vue CLI 的包名称为 vue-cli。总之，通过执行 npm install -g cnpm --registry=https://registry.npm.taobao.org 这个命令，您可以全局安装 cnpm，并且使用淘宝的 npm 镜像源来加速 npm 包的安装过程。总之，尽管可以使用 --force 参数来强制安装旧版本的 Vue CLI，但推荐使用 npm install -g @vue/cli 来安装最新版本的 Vue CLI，以获得更好的功能和支持。
Win11下搭建vue {保姆级教程}{设置环境变量}{设置淘宝镜像}
Vanscoat的博客
03-25 6638
①下载node.js ②查看npm安装目录，查看npm的prefix和cache路径配置信息，修改全局和缓存路径 ③调整环境变量 ④设置设置淘宝镜像 ⑤安装vue及vue-cli 脚手架 ⑥查看vue版本及cli版本
win11 Vue 安装，脚手架，生成项目
qq_34212381的博客
01-02 827
win11 小白笔记
Windows11安装node.js和Vue环境
u013020368的专栏
02-08 854
6，系统变量里面，新建环境变量，变量名为NODE_PATH，变量值为D:\Program Files\nodejs\node_modules。10，执行npm uninstall vue-cli -g和npm uninstall @vue/cli -g，卸载旧版本的vue。2，我这里将安装路径调整到了"D:\Program Files\nodejs\",其余的都是默认配置，直到安装成功。3，打开CMD，输入node -v和npm -v查看安装的版本，可以确认安装成功。5，执行如下命令，调整全局设置。
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 9467
未完
详解如何从零开始搭建Express+Vue开发环境
10-18
【Express+Vue开发环境搭建详解】 在现代Web开发中，集成前后端框架能够极大地提高开发效率和项目的可维护性。本文将详细介绍如何从零开始搭建一个基于Express（Node.js的Web应用框架）和Vue（渐进式JavaScript框架...
详解vue-cli脚手架中webpack配置方法
12-03
总之，Vue CLI 结合 Webpack 提供了一套高效、可扩展的前端构建工具链，简化了项目初始化和配置过程，让开发者能够专注于编写应用逻辑，而不是底层构建细节。通过理解 Webpack 的工作原理和 Vue CLI 的配置方式，...
windows下vue.js开发环境搭建教程
10-20
主要为大家详细介绍了windows下vue.js开发环境搭建教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
windows下vue-cli及webpack搭建安装环境
11-26
1、安装Node.js，node.js安装包及源码下载地址为：https://nodejs.org/en/download/。 2、安装npm，由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下，出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级，命令如下： npm install npm -g 你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: npm install -g cnpm
如何运行一个Vue项目
01-20
如何运行一个Vue项目 一开始刚接手项目内的vue.js，或者在GitHub上找到vue.js的开源项目，会发现不知如何运行这个项目。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程分享给大家。 1. 环境安装 首先，列出来我们需要的东西： node.js环境（npm包管理器） vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 安装node.js 从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。 安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功
windows环境搭建Vue开发环境
Seven71111的博客
11-27 347
windows环境搭建Vue开发环境 参考： https://www.cnblogs.com/zhaomeizi/p/8483597.html
Windows 下Vue的开发环境配置（nvm、npm、node）
m0_37364725的博客
09-26 1610
Windows 下Vue的开发环境配置（nvm、npm、node ）
vue在windows11环境下启动项目
kunwen123的博客
11-07 551
vue在windows11环境下启动项目 安装vscode 安装npm 在vscode上打开终端 进入项目目录 运行项目 运行命令 cd D:/project/ npm list --depth=0 -global npm install npm run dev 安装vscode插件 vetur eslint Auto Close Tag Auto Rename Tag Debugger for Chrome ...
windows搭建vue开发环境
小哥骑单车
06-24 2614
3、安装淘宝镜像(cnpm) npm install cnpm -g --registry=https://registry.npm.taobao.org。参考你的项目需要运行java一样，配置JAVA_HOME这些；然后创建项目（或者使用类似vue create my-project命令创建项目，命令:cnpm install @vue/cli -g(最新版本)//cnpm install vue-cli -g(不是最新版本)输入npm install vue -g。2、安装好后，配置环境变量。
vue安装|win11系统
失眠的树的博客
07-02 533
超时报错解决方法：https://blog.csdn.net/Mq_sir/article/details/118057699?在D:\nodejs下新建两个文件夹 node_cache和node_global。查看D:\nodejs\node_global文件夹，如果是空的，对path环境变量添加D:\nodejs\node_global。自定义安装路径，我的安装路径为**“D:\nodejs”**再次查看D:\nodejs\node_global文件夹.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值