vue-cli2[vuecli2和vuecli3的区别]
vue-cli2可能是相关行业人士都值得关注的知识,在此对vuecli2和vuecli3的区别进行详细的介绍,并拓展一些相关的知识分享给大家,希望能够为您带来帮助!
vue-cli2.0与3.0在目录结构方面,有明显的不同。
vue-cli3.0移除了配置文件目录,config 和 build 文件夹。
同时移除了 static 静态文件夹,新增了 public 文件夹,打开层级目录还会发现, index.html 移动到 public 中。
配置项,3.0 config文件已经被移除,但是多了.env.production和env.development文件,除了文件位置,实际配置起来和2.0没什么不同。
没了config文件,跨域需要配置域名时,从config/index.js 挪到了vue.config.js中,配置方法不变。
Vue3.0不论是原生的html标签还是vue组件,他们都会通过h函数来判断,如果是原生html标签,在运行时直接通过Virtual Dom来直接渲染,同样如果是组件会直接生成组件代码。
数据监听,Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的,而vue3.0的版本,是基于Proxy进行监听的,其实基于proxy监听就是所谓的lazy by default。
版权声明:本文为CSDN博主「水墨-青花」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
全局状态管理器,可以在项目的任何一个组件中去获取和修改,修改可以得到全局响应的变量
vue-cli2 项目中安装vuex,使用 npm install vuex –save
安装成功后,在src目录下新建一个store文件,里面创建一个js文件
在js文件中写入:
然后在main.js文件中引入 store 并注册到 vue 实例中
vuex的文件配置到这里就完成了
现在再回去看store文件里的参数,这几个对象就是vuex五大核心:
State :可全局访问的对象
Getter :和vue的computed一样,用来实时监听state的值的变化(最新状态)
Mutation :存放改变state值的方法(同步)
Action :触发mutations里面的方法(异步)
module :模块
State是存储在Vuex中的数据对象,和Vue实例中的data一样。只不过State是可以全局访问的。
定义stata对象,直接在 state 里面定义 key:val ,它可以定义任意数据类型
在页面中获取state的值 使用 this.$store.state
在这里 state 通常都是挂载到 computed 计算属性上,这样当state的值发生改变的时候都能及时的响应。
当然也能用到 watch 去监听
State中的辅助函数 mapState
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性
输出
Vuex 允许我们在 store 中定义 getter (可以认为是 store 的计算属性)。就像计算属性 computed 一样, getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值( state 中的属性)发生了改变才会被重新计算。
Getter的作用就是用来实时监听state的值的变化
定义Geters对象
使用 state 作为其第一个参数
可以使用其他 getter 函数作为第二个参数
在页面中使用getters,使用 this.$store.getters
Getters中的辅助函数 mapGetters
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
输出
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
使用 state 作为第一个参数
使用 this.$store.commit(‘方法名’) 触发mutations中的方法
输出
而第二参数官方解释叫 提交载荷(Payload)
可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload)
简单来说就是可以在在第二参数里传入额外的参数
这里还是用name来做例子
输出
在 Vuex 中,mutation 必须是同步函数
Action 可以包含任意异步操作,Action的作用就是异步触发Mutations
定义action对象
接收一个 context 参数和一个要变化的形参
context 与 store 实例具有相同的方法和属性,所以他可以执行 context.commit(“”) ,也可以使用 context.state 和 context.getters 来获取 state 和 getters 。
使用 this.$store.dispatch(“方法名”) 方法执行Actions
输出
同样Action还支持载荷方法,传入第二形参
输出
其中 module 的作用是可以把 store 分割成模块(module),每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
主要是为了解决由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
简单来说就是可以把vuex模块化
项目目录不同
1、vue-cli3.o移除了config.文件夹。
2、多了vue.config.js文件。
3、新增了一个views文件夹。
4、删除了static新增了public文件夹。
5、index.html移动到public了。
配置项不同
1、vue-cli2.0的域名配置,分为开发环境和生产环境。
2、所以配置域名时,需要在config中的dev.env.js和。
3、prod.env.js中分别配置3.0 config.文件已经被移除。
4、但是多了。env.production和env.development文件。
5、除了文件位置,实际配置起来和2.没什么不同。
创建项目的方式不一样
1、vue-cli2.0,vue init webpack项目名。
2、vue-cli3.0 vue create项目名。
关于vue-cli2和vuecli2和vuecli3的区别的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 931614094@qq.com 举报,一经查实,本站将立刻删除。