vue，vue-cli和@vue/cli是什么关系？有什么区别？

已于 2022-08-23 21:50:46 修改
阅读量6k 收藏 15
点赞数 5
分类专栏： Vue 文章标签： vue 前端框架
于 2021-11-30 22:09:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cs_zhao18/article/details/121642395
版权

vue是构建用户界面的渐进式JavaScript 框架。

vue-cli是vue的一个官方脚手架工具（快速工程化命令工具）, 用来帮助程序员们快速搭建基于vue框架的开发环境。

vue有很多脚手架工具，vue-cli只是其中一种，侧重于单页面应用 (SPA) 的快速搭建，网址：cli.vuejs.org/zh/guide/

@vue/cli是新版vue-cli，提供了GUI维护界面，@vue/cli 安装的是vue3及以上版本, vue-cli 安装的是vue2。

扩展：

  • Vue-cli = Vue + 一堆的js插件。
  • SpringCloud = SpringBoot + 一堆第三方组件。

  • vue-cli 4.5以下，对应的是Vue2
  • vue-cli 4.5及以上，对应的是Vue3

参考文献

vue和vue-cli和@vue/cli是三个不同的东西？-慕课网

@vue/cli 和 vue-cli - 萧纳 - 博客园

介绍 | Vue CLI

Vue CLI 和 Vue：了解两者之间的区别
ByteWhisper的博客
09-27 954
在本文中，我们将探讨 Vue CLI 和 Vue 之间的区别以及它们在编程中的作用。Vue CLI 则是一个用于快速搭建 Vue 项目的命令行工具，它提供了一整套的工具链和预设配置选项，使得项目的搭建和开发过程更加简单和高效。通过 Vue CLI，开发者可以专注于业务逻辑的实现，而无需关心构建工具的配置和细节。Vue CLI 则是一个命令行工具，它为开发人员提供了一整套的工具链，用于快速搭建 Vue 项目。Vue 强调响应式的数据绑定，使得数据的变化能够自动地反映在界面上，提供了一种简洁而灵活的编程模型。
脚手架、vue-cli与@vue/cli概念辨析
skysys的研究小屋
01-22 1611
脚手架 「为减少重复性工作而做的重复性工作」的工具 例子 你要写一个项目0，源语言为ES6，用了sass, 后端是node.你每次完成一部分功能，你都要用把ES6编译到ES5、编译sass、压缩html文件。每次修改代码都要做的编译ES6、sass、压缩html这些就是重复性工作。 后来你知道了gulp, 然后你写了个gulp脚本，每次有代码改动，一句gulp build就帮你完成了上面说的这些重复性工作. 你写的gulp脚本就是为减少重复性工作而做的工作。你写完这个项目0之后，你又要写项目1，还是ES6、
Vue 与 Vue-cli 的学习
Yg123345的博客
02-18 423
vue-cli 是vue.js的脚手架，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板
详叙 @vue/cli 和 vue-cli
Baron的技术blog
02-05 5080
Vue CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。 vue-cli 工具的初衷就是为了让开发者能够开箱即用快速地进行应用开发而开发的，它秉承的是“约定大于配置”思想，简单说就是”能不配置的就不配置，你就按照我的方式来，也不要去争论这个好不好，快速进行业务开发才是正经事”。他们不建议你去配置，但也不会拦着你去配置。另外 Webpack 对初学者并不是十分友好，‘又长又臭’的配置，普通开发者很难写入定义良好，性能优化的配置。不然就不会各种 cli 工具冒出来了，比如parcel
vue-cli和vue有什么区别
m0_74249400的博客
05-19 844
“vue-cli”和vue的区别：vue是“vue.js”的简称，是一个成熟的用于构建用户界面的javascript渐进式框架，而“vue-cli”是vue基础上进行开发的工具系统，是vue框架的一个命令工具。
脚手架vue-cli和@vue/cli的搭建及区别
热门推荐
qq_37635012的博客
04-14 1万+
vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架，首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装，node安装完之后，node自带的包管理工具npm也就安装好了，我们win系统直接开始在cmd窗口输入node -v查看node版本号，如下图能看到版本号说明node安装成功:...
创建node、vue、以及@vuecli 和 vue-cli 的区别
weixin_45168162的博客
10-18 777
参考。
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...
vue-cli-plugin-quasar：Quasar Framework Vue CLI插件
02-03
类星体框架：vue-cli-plugin-quasar :rocket: 在2分钟内开始使用Quasar Framework构建Vue应用！ :warning_selector: 为了获得Quasar的高级（推荐）体验，包括构建Mobile＆Electron应用程序以及轻松升级到新...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
vue-cli-plugin-multiple-page 一个基于 vue-cli 捆绑多个页面的插件。 与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请...
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
我们有很多现有的vue-cli（3.x / 4.x）项目。 在生产中：基于webpack的vue-cli仍然是捆绑webapp的最佳实践（通过代码拆分，旧版浏览器的旧版构建）。 在开发中：即时启动服务器并通过闪电快速实现HMR很有趣。 ...
【大前端】vue-cli、@vue/cli和vue-create脚手架创建Vue单页应用的区别和使用
EverRose的博客
10-31 392
1、避免使用vue-cli2、对老项目来说vue2项目通常使用的是vue-cli脚手架创建的项目。vue3项目通常使用的是@vue/cli脚手架创建的项目。3、对新项目来说优先使用@vue/cli脚手架创建项目。依赖特定的Webpack的特性时使用vue-cli创建项目。
Vue、Vue CLI、Webpack 和 Webpack CLI 的版本兼容对照表
qq_24600981的博客
05-23 7687
这些指南只是一些常见的版本兼容性指南。在实际项目中，取决于具体的应用场景和使用的组件库，不同版本之间可能还存在其它的兼容性问题。因此，我们建议使用最新版本的 Vue、Vue CLI、Webpack 和 Webpack CLI 来获得最佳的性能、安全性以及最新的功能和改进。同时，在使用前应该先了解相应版本的官方文档和版本兼容性指南。
使用Vue-cli2.0和 Vue-cli3.0创建vue项目及配置
ssy001128的博客
06-09 3101
安装node后安装淘宝镜像。
vue中脚手架的使用 （@vue-cli、@vue/cli）
夜空孤狼啸的博客
04-21 1699
安装步骤： 1 全局安装@vue/cli npm install @vue/cli -g vue --version 查看vue脚手架是否安装成功 2 创建项目 vue create 自定义项目名 3 进入项目 并且 运行项目
使用vue2应该安装的@vue/cli版本
yusha123的博客
08-18 5174
如果你只想使用vue2作为主版本，请安装@vue/cli4.4.6版本，因为我在官网中看到了这句话 对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。 也就是说如果要使用vue2，需要@vue/cli4.5以下的版本，也就是@vue/cli4.4.6的这个版本 ...
vue基础知识-vue/cli3与vue-cli2的区别与安装
quhaha的博客
07-05 1220
如果已经全局安装过旧版本的vue-cli npm uninstall vue-cli -g //yarn global remove vue-cli。assets： 是页面和组件中用到的静态资源，比如公共样式文件，字体文件，图片等，该文件夹与public的区别是：该文件夹中的资源会被webpack编译；README.md：项目的说明文档，项目介绍、License、一些命令（例如：启动命令、打包命令、单元测试命令等）这里的资源会被webpack构建；
webpack、vite、vue-cli、create-vue 的区别
m0_47761892的博客
02-13 3109
webpack、vite、vue-cli、create-vue 的区别
vue-cli、create-vue、webpack、vite、rollup的区别
陈小陈的博客
11-16 1112
webpack、Rollup、vite、rollup、create-vue、vue-cli
依赖树有什么问题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 ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值