视图-cli2[vuecli2]和vuecli3的区别]

Bitget下载

注册下载Bitget下载，邀请好友，即有机会赢取 3,000 USDT

APP下载   官网注册

vue-CLI2可能是相关行业的人应该注意的知识。这里详细介绍一下vuecli2和vuecli3的区别，还有一些相关的知识分享给大家，希望能给你带来帮助！

Vue-CLI2.0和3.0在目录结构上有明显的区别。

vue-cli3.0删除配置文件目录、配置和构建文件夹。

同时，静态文件夹被删除，公共文件夹被添加。当你打开分层目录时，你会发现index.html已经搬到了公共区。

CI3.0配置文件已被删除，但还有更多env.production和env.development文件。除了文件位置，实际配置和2.0没什么区别。

没有配置文件。当域名需要跨域配置时，从config/index.js移到vue.config.js，配置方式不变。

vue3.0无论是原生html标签还是vue组件，它们都会被H函数判断。如果是原生html标签，运行时直接通过虚拟Dom渲染，如果是组件，直接生成组件代码。

数据监控众所周知，Vue2.x是由es5的object.defineproperties中的getter和setter实现的，而vue3.0的版本是基于Proxy进行监控的。事实上，基于代理的监控在默认情况下被称为懒惰。

版权声明：本文为"水墨画-青花"作者CSDN博主，遵循CC4.0BY-SA的版权协议。，转载请附上原文出处链接及本声明。

全局状态管理器，可以在项目的任何组件中获取和修改，可以修改可以获取全局响应的变量

vue-cli2安装在项目中。，使用NPM安装vuex——保存

，安装成功后，在src目录下新建一个store文件，并在其中创建一个js文件

，写入js文件：

然后将商店导入main.js文件，并在vue的实例中注册它。

vuex的文件配置到此完成。

现在让'；让我们看看存储文件中的参数。这些对象是vuex的五个核心：

状态：全局可访问对象

Getter:和vue的computed一样，用于实时监控状态值(最新状态)的变化。

突变：存储改变状态值的方法(同步)

动作：在突变中触发方法(异步)

模块：模块。

状态是存储在Vuex中的数据对象，就像Vue实例中的数据一样。只有状态可以全局访问。

定义stata对象。，直接在状态中定义key:val，可以定义任意数据类型

。获取页面中的状态值并使用这个。$store.state

这里，状态通常挂载在计算属性上，这样当状态的值发生变化时，可以及时响应。

当然，你也可以用手表来监控

状态映射状态中的辅助功能

当一个组件需要获得多个状态时，将这些状态都声明为计算属性会有些重复和多余。来解决这个问题。，我们可以使用mapState辅助函数来帮助我们生成计算属性

Output

Vuex允许我们定义store中的getter(可以认为是store的计算属性)。。就像计算属性computed一样，getter的返回值是根据其依赖关系进行缓存的，只有当其依赖关系值(state中的属性)发生变化时才会重新计算。

getter的作用是实时监控state的值的变化

定义Geters对象

，将state作为其第一个参数

您可以使用其他getter函数作为第二个参数

在页面中使用getter并使用它。$store.getters

getters中的辅助函数Mapgetters

Mapgetters的辅助函数只是将存储中的getters映射到本地计算属性：

Output

改变Vuex的存储状态的唯一方法是提交突变。

使用状态作为第一个参数

用这个。$store.commit(('；方法名'；)来触发方法

输出

您可以向store.commit传递一个额外的参数，即变异的有效负载

。简单来说，你可以在第二个参数中传入一个额外的参数

在这里，让'；以name为例

Output

在Vuex中，突变必须是同步函数

动作可以包含任何异步操作。action的作用是异步触发突变

定义一个Action对象

接收一个上下文参数和一个要改变的参数

上下文与存储实例具有相同的方法和属性，因此它可以执行context.commit("；").Youcanalsousecontext.stateandcontext.getterstogetstateandgetter.

用这个。$store.dispatch("；方法名")方法来执行动作

输出

同样，动作也支持load方法，传入第二个参数

输出

模块的作用是将商店分成模块。，每个模块都有自己的状态、变异、动作、getter，甚至嵌套的子模块——，从上到下的划分方式是一样的：

主要解决使用单一状态树的问题。，应用程序的所有状态都将集中在一个相对较大的对象中。当应用程序变得非常复杂时，store对象可能会变得非常臃肿。

简单来说，你可以模块化vuex

，拥有不同的项目目录

1。vue-cli3.o删除了配置。文件夹。

2。添加了vue.config.js文件。

3。添加了一个视图文件夹。

4。静态已删除，公共文件夹已添加。

5。index.html已经上市了。

配置项不同

1。vue-cli2.0的域名配置，分为开发环境和生产环境。

2。因此，在配置域名时，dev.env.js和。在prod.env.js中分别配置的

3，3.0config文件已被删除。

4，但更多。环境生产和环境开发文件。

5。除了文件位置，实际配置和2没什么区别。创建项目有多种不同的方法

1,vue-cli2.0,vueinitwebpackprojectname.

2,vue-cli3.0viewcreationprojectname[XY002]

vue-CLI2与vuecli2、vuecli3的区别介绍到此结束。你找到你需要的信息了吗？如果你想了解更多这方面的内容，记得关注这个网站。

相关内容