本文作者:qiaoqingyi

vue版本2和3怎么看(vuecli查看版本)

qiaoqingyi 2023-02-17 1104

本篇文章给大家谈谈vue版本2和3怎么看,以及vuecli查看版本对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

vue2.0和3.0区别

项目目录不同

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版本2和3怎么看(vuecli查看版本)

vue3.0和2.0的区别是什么?

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版权协议,转载请附上原文出处链接及本声明。

vue2与vue3的区别

       最近接触并了解了vue3,发现vue2的语法vue3能够继续使用,并没有任何影响,但是vue3还是和vue2有很大区别的

1.template标签

       我们在使用vue2的时候,template标签只能写一个元素,所以我们要用一个大的盒子把里面的元素包起来,但是vue3中却解除了这个限制,也就是说,一个template标签中可以写多个标签

2.建立数据

在vue2中,我们在写需要的数据的时候需要在export default的里面添加data并把它return出来

而在vue3中,新增了个函数setup,

vue2中的声明周期都是写在data外面的,和data同级,但是vue3的生命周期是写在setup函数里面的

3.绑定事件

vue3中的绑定事件和建立数据差不多

Vue2和Vue3的区别

vue2 的双向数据绑定是利用 ES5 的一个API Object.definePropert() 对数据进行劫持,结合发布订阅模式的方式来实现的。

vue3 中使用了 ES6 的 Proxy API对数据代理。

相比 vue2.x ,使用 proxy 的优势如下:

在 vue2 中定义数据变量是 data(){} ,创建的方法要在 methods:{} 中。

而在 vue3 中直接在 setup(){} 中,在这里面定义的变量和方法因为最终要在模板中使用,所以最后都得 return 。

如:

除了这些钩子函数外, Vue3.x 还增加了 onRenderTracked 和 onRenderTriggered 函数。

这篇文章持续更新哟

vue-cli2版本跟3版本中的区别

2.x版本目录

3.x版本

vue-cli3是没有static文件夹

原来放在static下的文件,现在应该放在public文件夹下

2.x写法

3.x写法

如果json文件里有图片路径里不用加 public

img src="../../public/img/details06_3.png" alt=""

改为

img src="../../img/details06_3.png" alt=""

关于vue版本2和3怎么看和vuecli查看版本的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

阅读
分享