vue-cli2[vuecli2和vuecli3的区别]-掘金网

vue-cli2[vuecli2和vuecli3的区别]

掘金K • 15 6 月, 2023 2:16 下午 • 数字经济

摘要：

vue-cli2和vue-cli3都是Vue.js的常用脚手架工具，但二者在部分技术细节和使用方面存在差异，本文将从四个方面详细描述这些区别。第一方面是项目生成方式的改变，包括v2的vue init和v3的vue create命令；第二方面是脚手架生成的项目配置文件不同，v3会默认创建vue.config.js等文件；第三方面是在webpack配置文件上有所不同，v3采用了新的webpack Chain API，优化了开发和打包效率；第四方面则是结构上的差异，v3将源码目录的结构调整，并将常用配置文件移动到了根目录。

正文：

项目生成方式的改变

在项目生成方面，vue-cli2使用vue init命令进行项目创建，而vue-cli3更换为vue create，这直接影响了项目的创建和运用。使用vue init新项目时，我们需要手动输入信息来配置项目名称、作者、模板以及package.json等文件信息，相比而言使用vue create更加方便，它会自动根据给定信息创建项目并且配置好所需文件，使得前端项目搭建变得更为便捷。

项目配置文件的不同

除了项目生成方式的改变，vue-cli3也将一些封装好的配置文件外放到了根目录下，例如babel.config.js和postcss.config.js等，这些文件的位置更易于访问，带来的可操作性更好。

webpack配置文件的差异

在webpack的配置方式上，vue-cli2采用的是手动编写配置文件的方式，而vue-cli3则使用了Webpack Chain插件来链式编写配置，配置项更加清晰易懂。比如vue-cli2中，我们需要在webpack.base.conf.js文件里修改webpack配置，但是在vue-cli3中，我们可以使用vue.config.js文件进行配置，这个文件只需要在根目录下创建就好了。vue-cli3中的方案使开发者编写webpack配置更加方便和简单，增加了可读性和易用性。

项目结构的改变

Vue CLI 3 对项目结构进行了调整和规范化。在Vue CLI 2 中，src目录下的组件文件是单独的，而assets比较混乱，经常将图片和样式混在一起，开发者在使用时显得有些杂乱无序。Vue CLI 3 则使用了约定大于配置的原则，对项目的目录结构进行了调整。例如，在 vue-cli3 中，所有的资源文件都会集中在 public 文件夹中，而在 src 文件夹中则包括了所有的应用程序代码以及需要打包的静态资源。这样做的好处是让代码更具可读性，使得开发工作变得更方便。

结论：

总的来说，vue-cli3在开发规范和配置更加友好，减少了开发者在开发过程中的复杂性和不必要的繁琐，提高开发效率。但是，在代码维护和更新时，手动维护配置项比较麻烦，需要进行及时更新，也需要考虑到项目的所有架构方面，因此在项目的选择上需要根据项目的具体情况来进行选择。

原创文章，作者：掘金K，如若转载，请注明出处：https://www.20on.com/326558.html