vue2 和vue3的区别 和vue-cli的关系

最新推荐文章于 2025-11-05 13:34:40 发布
原创 最新推荐文章于 2025-11-05 13:34:40 发布 · 2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍如何安装Vue CLI 3.0并使用它来构建Vue项目。包括安装命令、创建新项目的不同方式及启动项目的方法。此外还介绍了如何查看已安装的Vue CLI版本。

安装vue-cli3.0

npm install @vue/cli -g

vue-cli构建项目

vue init webpack demo   // 2.0
vue create demo	//	3.0

启动项目

npm run dev		///	2.0
npm run serve  // 3.0

查看vue-cli版本 命令是：vue -V

例如此时我的vue版本 是@vue/cli 5.0.4 , 创建项目使用 ：vue create demo 后选择vue2 创建的就是vue2的项目。

查看你的vue版本

 

 在package.json  中

Vue和Vue CLI什么关系？
甲蛙全栈
01-12 6364
很多小伙伴搞不清Vue和Vue CLI什么关系，版本号区别，来解惑一下。
vue-cli和vue之间的复杂关系
weixin_46247163的博客
06-04 508
(1)vue-cli3之前，也就是vue-cli2只能利用命令初始化vue2.x的项目，(2)vue-cli3~vue-cli4.5之间时,可以利用初始化vue2.x的项目，不能初始化vue3.x，因为vue-cli脚手架版本4.5以上对应的才是vue3(3)vue-cli4.5以上时，可以利用初始化vue2.x或者也vue3.x的项目，两者都可以在初始化时，自行选择。
vue2和vue3差别汇总
最新发布
onlymscn的博客
11-05 969
Vue3相较于Vue2的主要变化包括：采用Proxy实现更完善的响应式系统，引入Composition API提升代码组织和复用性，性能优化如Tree-shaking支持，更好的TypeScript集成。新增Teleport、Suspense等特性，支持多根节点Fragment，简化自定义指令和函数式组件语法。同时生态工具需升级对应版本，如Vuex和VueRouter。建议新项目直接使用Vue3，旧项目可逐步迁移。
彻底搞懂vue-cli各版本和vue2和vue3之间的关系！
weixin_50018442的博客
10-24 7613
我的深刻理解:(1)vue-cli3之前，也就是vue-cli2只能利用命令初始化vue2.x的项目，(2)vue-cli3~vue-cli4.5之间时,可以利用初始化vue2.x的项目，不能初始化vue3.x，因为vue-cli脚手架版本4.5以上对应的才是vue3(3)vue-cli4.5以上时，可以利用初始化vue2.x或者也vue3.x的项目，两者都可以在初始化时，自行选择。
vue项目查看vue版本及cli版本
l244112311的博客
06-12 1万+
查看vue及cli版本
vue/cli 和 vue 版本对应及安装
热门推荐
qq_41040196的博客
11-15 2万+
vue 和 vue cli 的版本对应和安装方法
精选资源
vue-cli-plugin-element-Vue CLI 3插件，可在几秒钟内用element-ui构建企业应用程序-Vue.js开发
05-27
vue-cli-plugin-element可以在几秒钟内使用vue-cli和element-ui快速构建企业应用程序。 该项目不仅是vue-cli插件，而且是vue-cli-plugin-element，可在几秒钟内使用vue-cli和element-ui快速构建企业应用程序。 该...
精选资源
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-component-创建组件的Vue CLI 3插件-Vue.js开发
05-27
vue-cli项目的vue-cli-plugin-component组件插件│README.md│LICENSE（可选）└───src│├──index.js│└───components│vue-cli-plugin-component组件vue-cli项目的插件│README.md│LICENSE（可选）└─...
精选资源
vue-cli-plugin-electron-builder-适用于Electron的Vue CLI 3插件，无需使用Electron Builder的必需配置。-Vue.js开发
05-27
：在使用Vue-CLI 3或4创建的应用程序目录中打开一个终端（建议使用4）。 然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器：vue add electronic-builder就是这样！ 您准备好出发了！ 要...
vue-cli-plugin-quasar：Quasar Framework Vue CLI插件
02-03
:rocket: 在2分钟内开始使用Quasar Framework构建Vue应用！ :warning_selector: 为了获得Quasar的高级（推荐）体验，包括构建Mobile＆Electron应用程序以及轻松升级到新Quasar版本的能力，您应该使用Quasar CLI ...
vue项目查看vue版本及cli版本的实现方式
01-22
查看cli版本，执行如下： vue -V 查看vue版本 npm list vue 补充知识：vue老项目升级vue-cli3.0问题总结 升级步骤 1、 删除原vue-cli并安装vue-cli3.0 2、删除新项目中src下的内容，把原项目中src目录覆盖到新项目中 3、把router从目录文件夹改为文件，src/router/index.js提高一层变成src/router.js 4、 我的项目中src已经分为了views和components所以无需修改，如果不是这个结构需要自己区分下 5、将原项目的index.html及favicon.ico覆盖到新项目的public中 6、
关于Vue、Vue-router、Vuex、Vue-cli版本
weixin_40944062的博客
01-27 3961
关于Vue、Vue-router、Vuex、Vue-cli版本 瞎叨叨: 通过长时间的学习和搜索过程中发现, 好多人对Vue, Vuex,Veu-router, Vue-cli之间的版本有很多混淆, 看到标题是Vue3.x, 点进去, 发现还是new Vue({}), 其实, Vue3.x应该是createApp(App). 还是稍微整理一下, 贴在下面: vue-version name version Vue2.x Vuex 3.x Vue2.x Vue-router 3.x
vue-cli@2.9.6 与@vue/cli@5.0.8的区别
m0_69573649的博客
06-02 3398
CLI 版本：vue-cli@2.9.6 是一个旧版本的 CLI 工具，而 @vue/cli@5.0.8 则是目前最新的 CLI 工具，它提供了更多功能和优化，并且可以更好地与其他 Vue 生态系统工具进行交互。构建工具：vue-cli@2.9.6 使用的是 Webpack 1.x 作为项目构建工具，而 @vue/cli@5.0.8 使用的是 Webpack 5.x。Vue 版本：vue-cli@2.9.6 默认集成的是 Vue 2.x 版本，而 @vue/cli@5.0.8 默认集成的是 Vue。
vue-cli脚手架Vue2.x与Vue3.x安装与预设
m0_51062476的博客
08-23 797
https://next.router.vuejs.org/vue路由 https://v3.cn.vuejs.org/vue官网 Vue.js中this.$nextTick()的使用 vue里ref ($refs)用法
使用vue cli创建vue2项目
x65456的博客
04-08 1330
4这几个的意思是选择你需要的东西。Babel的意思把es6降级到浏览器能识别的语法。一般按下面的选就行。六：现在有两种方法创建vue2项目，一种是在cmd里，一种是在vscode或webstorm的集成终端里。4然后就跟cmd里一样输入输入vue create hello-world按回车。1.打开这个文件夹在地址里输入cmd按回车，然后就出来cmd界面。意思是手动选择特性，前几个选项的意思是默认的。2打开vscode，把它拖到左边，然后右击打开集成终端。9.选第一个，意思是代码规则，在保存的时候校验。
使用 Vue CLI 创建一个 Vue2 项目
BI
03-18 1132
仅提供一个简单的创建 Vue2 项目的步骤。目前 Vue CLI 的最新版本为 v5.0.8。
安装最新版vue-cli，并搭建一个vue2项目
Yyyy的博客
10-31 885
安装最新版vue-cli，并搭建一个vue2项目。
vue，vue-cli和@vue/cli是什么关系？有什么区别？
cs_zhao18的博客
11-30 6323
vue是构建用户界面的渐进式JavaScript 框架。vue-cli是vue的一个官方脚手架工具（快速工程化命令工具）, 用来帮助程序员们快速搭建基于vue框架的开发环境。vue有很多脚手架工具，vue-cli只是其中一种，侧重于单页面应用 (SPA) 的快速搭建，网址：cli.vuejs.org/zh/guide/@vue/cli指代vue-cli的最新的npm.js包。扩展：...
vue-cli2和vue-cli3的区别
06-28
### 回答1： vue-cli2和vue-cli3有一些重要的区别: 1.配置文件: vue-cli2使用的是`config/index.js`文件来配置项目,而vue-cli3使用的是`.env`和`.env.xxx`文件来配置项目. 2.构建工具: vue-cli2使用的是webpack1,而vue-cli3使用的是webpack4. 3.项目结构: vue-cli2项目结构比较简单,而vue-cli3提供了更加灵活的项目结构. 4.插件系统: vue-cli2使用的是全局插件,而vue-cli3使用的是局部插件. 5.使用方式: vue-cli2是全局安装,而vue-cli3是局部安装. ### 回答2： Vue-cli是一个vue.js的官方脚手架工具，它可以帮助我们更快地搭建一个基于Vue的项目。Vue-cli2和Vue-cli3是Vue-cli的不同版本，在一些方面存在一些显著的差异。 1. 项目结构： Vue-cli2生成的项目结构中，代码和配置信息都放在同一个文件夹中，每一个功能模块都需要手动创建；而Vue-cli3采用了新的配置方案，将项目的配置信息单独抽离出来，并且在工具创建项目时自动生成了更完整的项目结构，使项目结构更加清晰和易于管理。 2. 配置方式： Vue-cli2是通过修改webpack.config.js文件来进行项目配置的，而Vue-cli3则是通过创建vue.config.js文件来进行项目配置的。在Vue-cli3中，我们可以直接在vue.config.js中添加一些特定的配置，而无需修改webpack.config.js文件。这样做更加方便，也更加容易管理项目的开发和部署。 3. 优化： 在Vue-cli3中，作者对项目进行了一些自动优化的处理，例如：自动抽取第三方库等，以优化打包和运行速度。而Vue-cli2则需要手动配置优化选项。 总之，Vue-cli3相比Vue-cli2在工程化方面有了更多的改进和优化，我们将会更加方便、快捷地构建一个基于Vue的项目。 ### 回答3： Vue是一个流行的JavaScript框架，它允许开发人员构建动态Web应用程序。而Vue CLI是Vue的脚手架工具，用于快速构建Vue项目。Vue CLI 2和Vue CLI 3是Vue CLI的不同版本，下面将介绍它们之间的不同： 1.项目结构：Vue CLI 2生成的项目结构是采用传统的单一的Webpack配置文件，而Vue CLI 3则是基于插件的灵活的配置，将Webpack配置拆分为多个小的配置文件。 2.依赖：Vue CLI 2使用的是Vue Router 2，而Vue CLI 3升级到了Vue Router 3，同时也使用了全新的Vuex。 3.插件化: Vue CLI 3采用了插件化的概念，每个插件都可以为开发者提供定制的Webpack配置和功能增强。 4.内置功能：Vue CLI 3集成了一些内置功能如：PWA支持、自动生成样式和文档等。 5.提高性能：Vue CLI 3对webpack的配置进行了深度优化，提供了更优秀的性能表现，同时还加入了预编译，tree shaking 外置化了 `webpack`,对项目编译速度支持了更大的提升。 总的来说，Vue CLI 3采用了更先进的技术、更简单的配置结构、更多的内置功能和更好的性能。如果你计划开始一个新的Vue项目，强烈建议使用Vue CLI 3，以提高代码的开发效率和性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值