webpack的安装，卸载 Vue/cli的安装 配置（适合小白）

已于 2022-10-16 15:26:39 修改
阅读量891 收藏 3
点赞数
分类专栏： Vue 文章标签： webpack npm vue.js
于 2022-10-16 15:13:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/F14867/article/details/127347353
版权
本文档详细介绍了webpack的全局安装、查看和卸载步骤，以及Vue/cli的不同版本安装、查看、查询和版本对应关系。针对Vue CLI，还讲解了如何初始化Vue2和Vue3项目。对于初学者，提供了清晰的操作指引。

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

webpack

安装

打开黑窗口，执行npm install webpack -g命令，安装webpack
(-g表示是全局安装)
在这里插入图片描述
此页面表示安装成功，并会显示所安装版本，而在node_cache文件夹中显示
在这里插入图片描述
在node_global文件夹中显示

在这里插入图片描述

查看

在黑窗口中执行 命令，查看webapck版本
npm webpack -v

卸载

  1. 删除局部webpack-cli
    npm uninstall webpack-cli
  2. 删除全局webpack
    npm uninstall -g webpack
  3. 删除本地wbpack
    npm uninstall webpack

Vue/cli

安装

  • 安装当前最新版
    npm install -g @vue/cli
  • 指定【3.0以下】版本安装
    npm install vue-cli@版本号
  • 指定【3.0以上】版本安装
    npm install -g vue/cli@版本号

查看

在黑窗口中输入命令，下方输出版本号。以下两种任意一种皆可查看

  • vue -v
  • npm list vue || npm list vue -g
  • 查看是否安装成功
    vue --version

查询

通过命令行查询可用的包的版本号（适用于3.0以下版本）
npm view vue-cli versions --json

版本号对应

  • Vue cli 4.5以下对应Vue2；
  • Vue cli4.5及以上，对应的是Vue3；

初始化项目

  • Vue CLI2初始化项目
    vue init webpack 项目名字
  • Vue CLI3初始化项目
    vue create 项目名字
    在创建项目时，会出现系列选择，以下是引用的解析
    引用coderwhy老师视频中关于创建项目的详解

引用coderwhy老师视频中关于创建项目的详解

vue.cli中使用vue-video-player以及使用hls的坑点
weixin_45076966的博客
03-31 2636
vue全家桶中使用vue-video-player的坑 *作为一个前端小白,公司就一个前端,有问题只能自己百度咯,然而遇到有些坑前前后后试验了好多次,才放在项目中.现在总结下vue-video-player中遇到的坑. 首先想要用这个插件,必须离不开下包.导包,用包的定律. 第一步:下包 npm install vue-video-player -S; 第二步: 然后main.js全局进行导包 i...
vue简学之路（十一）vue-cli脚手架安装
qq_44014971的博客
01-05 232
(一)安装node.js 下载地址：http://nodejs.org/en/download/ 下一步下一步走完 检查node -v 版本 安装node脚手架工具 使用npm -v 检查npm 版本 （二）安装npm (这里是全局安装) npm install vue-cli -g npm安装包管理器 npm install 加-g 代表不是全局安装 npm list 查看模块版本号 np...
webpack卸载的正确方式详细步骤
热门推荐
老油条
01-06 2万+
上一篇： webpack安装的正确方式详细步骤及使用淘宝 NPM 镜像加速   删除全局webpack-cli webpack4.x开始官方文档是说要安装cli所以如果的在用4.+就需要卸载cli npm uninstall -g webpack-cli # 注释给我这种小白提供参考 # 卸载 uninstall 可以简写成 un # 全局 -g 的完整写法是 --global #...
完全卸载webpack和npm
Youga123的专栏
06-17 5484
目录先缕一下思路卸载webpack本地卸载webpack全局卸载webpack卸载webpack-cli本地卸载webpack-cli全局卸载webpack-cli我遇到的错误卸载npm 注：本文是以测试er的角度来执行的各种操作，可能对开发小伙伴没什么太多的帮助。。。 之前挣扎很久安装原生npm失败，只好用淘宝源安装了npm和webpack，最近开发新引用了一个依赖，需要重新编译npm，结果，脆...
webpack和webpack-cli安装和卸载
weixin_59739381的博客
06-19 3861
4、查看webpack 信息 npm info webpack 4.0以后 直接输入该命令： webpack -v。1.删除全局webpack-cli ：npm uninstall -g webpack-cli。2.删除本地webpack-cli ：npm uninstall webpack-cli。3.删除全局webpack ：npm uninstall -g webpack。全局安装webpack，这样就能在全局使用webpack的命令。4.删除本地webpack ：npm un webpack。
vue sass-loader,webpack安装卸载操作命令
还在活水泥的未来包工头
11-06 1642
确保你的项目中使用的 webpack 和 case-sensitive-paths-webpack-plugin 依赖项是最新版本。如果没有指定特定版本的Node Sass依赖项，可以尝试更新"sass-loader"和"node-sass"依赖项的版本。更新 Vue CLI 版本：升级 Vue CLI 到最新版本可能有助于解决此问题。检查 node-sass 的可用版本：运行下面的命令，查看 node-sass 的可用版本列表。检查依赖项：确保你的项目中的所有依赖项都是最新版本。
卸载安装Webpack
weixin_43255906的博客
09-27 1992
一、首先要正确卸载webpack 卸载局部webpack-cli npm uninstall webpack-cli 卸载全局webpack npm uninstall -g webpack 卸载局部webpack npm uninstall webpack 二、安装(这些版本不冲突) npm install --save-dev webpack@4.35.3 npm install --save-dev webpack-cli@3.3.6 npm install --save-dev web
vue项目升级(01)：全面解析vuecil3/vuecil4的vue.config.js等常用配置
JCat的博客
06-15 6712
前言 前端变化日新月异，层出不穷，公司原项目使用vuecil2版本开发，elementUI等一系列库版本太低，也脱离世界很久远了，新版本库需要webpack4等环境，而老版本配置起来bug很多，在使用过程中很多东西都不能实现，所以升级真的是迫在眉睫； 此篇会逐步解析： vuecil2如何升级到vuecil3+ vuecil3+的语法 二次升级维护手册 webpack配置项目的优化… 一、vuecil2如何升级到vuecil3+ 卸载旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/
vue中使用cesium方法总结
m0_67401417的博客
06-18 2537
最近做的毕设用到了cesium，这里给大家总结一下vue如何结合cesium首先确定你使用的脚手架，vue-cli还是vite插件 | Vite 官方中文文档 (vitejs.dev)如果是vite，那么只需要在官方文档中找到社区插件，然后找到cesium安装即可使用如果你是用vue-cli(大部分还是使用这个)，有三种方式可以引入cesium（注意：该方法对应的是vue2+vue-cli4）最后可能，CDN的引入方法才最适合你的，有的时候不要死磕，时间成本很重要，遇到问题再解决。Cesium and we
VUE实战开发笔记
weixin_51971967的博客
05-02 916
VUE实战开发笔记 典型的前端三大框架：Angular.js、React.js、Vue.js 第一章 任务1 大觅项目业务场景 大觅项目的业务类型属于票务销售 大觅项目业务分析 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qVjc2IoV-1651459158595)(C:\Users\liujia\Documents\Tencent Files\2990403349\FileRecv\MobileFile\qq_pic_merged_1646205601710.jpg)
webpack卸载的详细步骤
weixin_42546299的博客
01-21 1万+
1.删除全局webpack-cli 如下命令 npm uninstall -g webpack-cli 2.删除本地（局部）webpack-cli 如下命令 npm uninstall webpack-cli 3.删除全局webpack 如下命令 npm uninstall -g webpack 4.删除本地webpack 如下命令 npm un webpack 5.检查webpack残余文件 ls 用ls命令查看是否有这几个文件 #node_modules #package-lock.json #pack
在Windows10上卸载 webpack 并重新安装
qq_50054286的博客
03-12 1026
在Windows10上卸载 webpack 并重新安装 打开命令模式或powershell。也可以使用 win+x，选择命令提示符选择 Windows powershell。 在命令行中输入，以下命令来卸载和全局安装 webpack： npm uninstall webpack -g 这将卸载全局安装的 webpack包。 接下来，如果你在项目中使用了局部安装的Webpack，进入你的项目目录。在命令提示符或PowerShell中，使用以下命令卸载局部安装的Webpack： npm uni
node安装和卸载webpack
qq_45850850的博客
08-16 1071
node卸载全局的webpack npm uninstall webpack -g 不知道用不用卸载局部的，反正是在局部webpack文件夹下用了下面这个命令 npm uninstall webpack 全局安装指定版本的webpack，这里以5为例 npm install webpack@5.0.0 -g 但是5版本的还要再安装一个webpack-cli npm install --save-dev webpack-cli -g 局部安装指定版本的webpack,以5为例,开发时依赖 npm in
webpack 安装、卸载的全部命令
书启鸿蒙知秋枫
10-01 3685
【代码】webpack 安装、卸载的全部命令。
linux怎么卸载webpack,如何正确彻底删除webpack 全局或是局部？
weixin_39864591的博客
05-08 563
这个那问题很重要如何安全的安装webpack ，卸载webpack。主要是为了防止玩webpack玩坏了还可以从西再来，请老司机带个路,晚上回去可能要从做系统了????刚入门看着文档全局安装webpack4.x，npm install --global webpack顺带也安装了webpack-clinpm install --save-dev webpack-cli检查版本webpack -v输出内容...
html引入css webpack_webpack从安装到基本使用讲解
weixin_29014237的博客
01-08 453
创建一个文件夹，取名为 usewebpackwebpack的安装(在安装webpack之前可以先使用npm init 初始化一下你的项目，会生成package.json说明文件)1.全局安装webpack (--save-dv 表示安装的是开发时依赖) npm install webpack --save-dv -g2.局部安装webpack (在文件夹usewebpack中打开终端) ...
教你如何正确彻底删除/安装 webpack 全局或是局部
xmfboss.科技
07-04 1万+
删除webpack，正确的姿势： 1. 删除局部webpack-cli npm uninstall webpack-cli 2. 删除全局webpack npm uninstall -g webpack 3. 删除本地webpack npm un webpack 安装webpack，正确的姿势： 1. 创建一个 webpack-demo 项目 mkdir webpack-demo ......
webpack的安装和卸载（mac)
一捌柒的博客
08-09 1656
什么是webpack webpack 用于编译 JavaScript 模块，它是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。 安装webpack 首先，安装wb之前你必须已经安装有node.js和npm(一般安装好node,npm也就安装好了） node.js安装（https://nodejs.org/en/download/） 全局安装we
webpack的npm安装卸载命令集合
weixin_46743083的博客
05-16 738
创建package.json文件： npm init -y 本地安装webpack： npm install webpack --save-dev 全局安装 webpack： npm install webpack -g 本地安装webpack-cli npm install webpack-cli --save-dev 全局安装 webpack-cli npm install webpack-cli -g 本地安装webpack-dev-server npm install webpack-dev-se.
依赖树有什么问题vue-demo@0.1.0 C:\源码\Vue\139Vue3加载Element-plus\vue-demo ├─┬ @vue/cli-plugin-babel@5.0.8 │ └── @vue/cli-service@5.0.8 deduped ├─┬ @vue/cli-plugin-pwa@5.0.8 │ └── @vue/cli-service@5.0.8 deduped └─┬ @vue/cli-service@5.0.8 ├─┬ @vue/cli-plugin-router@5.0.8 │ └── @vue/cli-service@5.0.8 deduped └─┬ @vue/cli-plugin-vuex@5.0.8 └── @vue/cli-service@5.0.8 deduped
最新发布
03-20
<think>嗯，用户想排查Vue项目依赖树中的问题，特别是@vue/cli-plugin-babel、@vue/cli-plugin-pwa和@vue/cli-service的版本冲突或潜在问题。首先，我需要回忆Vue CLI项目结构以及这些插件的兼容性。 首先，Vue CLI使用semver版本控制，主版本号需要一致。比如，如果@vue/cli-service是4.x，那么其他插件也应该用4.x。用户提到的三个插件都属于核心插件，版本必须与CLI服务一致。所以第一步应该检查package.json中这些插件的版本是否匹配。 接下来，用户可能需要运行npm ls或yarn list来查看依赖树，确认是否有不同版本的Vue CLI相关包。如果有，可能需要更新或降级某些包。比如，使用npm update命令更新到兼容版本，或者手动指定版本号安装。 另外，vue-cli-service的版本可能影响整个项目的构建，如果用户升级了Vue CLI但没有更新插件，就会出问题。这时需要检查全局和本地的CLI版本是否一致，避免因为全局安装的旧版本导致本地项目使用错误版本。 还可能存在依赖冲突，比如其他第三方库依赖不同版本的babel或webpack，这时候需要查看警告信息，用npm install --force或yarn install --force覆盖，或者手动解决冲突。 用户提供的引用中提到了使用全局安装Vue CLI，所以需要确认项目本地是否安装了正确版本，避免全局和本地版本不一致的问题。比如，全局安装了最新版，但项目用的是旧版，这时候可能需要卸载全局的，或者在项目内重新安装。 另外，引用[4]提到了Jest配置，如果用户使用了测试相关的插件，可能也需要检查相关依赖是否兼容。不过用户的问题主要集中在babel、pwa和cli-service上，可能暂时不需要处理测试部分。 最后，建议用户检查Vue的官方文档，确保所有插件的版本符合要求，或者使用Vue UI可视化工具来管理依赖，这样更直观。如果问题依旧，可能需要清除node_modules和lock文件，重新安装依赖。</think>### Vue项目依赖树问题排查指南 #### 一、版本兼容性检查 1. **核心依赖关系** Vue CLI生态中`@vue/cli-service`是核心服务，`@vue/cli-plugin-*`插件必须与其主版本匹配。例如： $$ \text{@vue/cli-service@5.x} \Rightarrow \text{@vue/cli-plugin-babel@5.x} $$ 建议通过以下命令验证版本： ```bash npm list @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-pwa ``` 2. **Vue CLI全局与本地版本冲突** 若全局安装的Vue CLI版本（如6.x）与项目本地版本（如5.x）不一致，可能导致依赖树混乱[^2]。可通过以下命令统一版本： ```bash npm uninstall -g @vue/cli # 卸载旧全局版本 npm install -g @vue/cli@5 # 安装指定版本 ``` #### 二、依赖树分析工具 1. **使用npm/yarn内置命令** ```bash npm ls --depth=5 # 显示依赖树前5层 yarn why @vue/cli-plugin-babel # 查看特定依赖来源 ``` 2. **可视化工具** 运行`vue ui`打开Vue项目管理器，通过图形界面查看依赖关系[^3]。 #### 三、常见冲突场景 | 冲突类型 | 表现示例 | 解决方案 | |---------|---------|---------| | **主版本不匹配** | `@vue/cli-service@5.0.8`与`@vue/cli-plugin-babel@4.5.19`共存 | 统一升级到5.x版本：`npm update @vue/cli-plugin-babel@5` | | **子依赖冲突** | `webpack`版本被不同插件强制锁定（如PWA插件依赖旧版） | 使用`npm install --force`或调整插件版本 | | **全局污染** | 全局安装的`vue-cli`与本地`@vue/cli`混合使用 | 彻底卸载旧版`vue-cli`：`npm uninstall -g vue-cli` | #### 四、操作示例 ```bash # 分步更新依赖 npm install @vue/cli-service@5.0.8 --save-exact npm install @vue/cli-plugin-babel@5.0.8 --save-dev npm install @vue/cli-plugin-pwa@5.0.8 --save-dev # 清理后重新安装 rm -rf node_modules package-lock.json npm install ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值