技术文章 | jswz

Web前端之Vue3.0发生了哪些变化

vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建东西,具有开箱即用并且供给简练的自定义配备等功用。
vue-cli 从 2.0 到 3.0 的晋级有太多的新东西可以说了,这篇文章首要介绍了快速了解vue3.0 新特性,需求的朋友可以参阅下!

 
 
一、新建项目
 
# 安装
npm install -g @vue/cli
# 新建项目
vue create my-project
# 项目启动
npm run serve
# 打包
npm run build
 
打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。

 
二、项目目录结构变化
 
我们对比发现 vue3.0 默认项目目录相比 2.0 来说精简了很多。
移除了配置文件目录, config 和 build 文件夹。
移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中。
在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件。

 
三、对象式的组件声明方式
 
vue2.0中的组件是通过声明的方式传入一系列option,和TypeScript的结合需要通过一些装饰器的方式来做,虽然能实现功能,但是比较麻烦。
 

vue3.0修改了组件的声明方式,改成了类式的写法,这样使得和TypeScript的结合变得很容易。
此外,vue的源码也改用了TypeScript来写。其实当代码的功能复杂之后,必须有一个静态类型系统来做一些辅助管理,如React使用的Flow,Angular使用的TypeScript。现在vue3.0也全面改用TypeScript来重写了,更是使得对外暴露的api更容易结合TypeScript。静态类型系统对于复杂代码的维护确实很有必要。
vue3.0的改变是全面的,上面只涉及到主要的3个方面,还有一些其他的更改:
支持自定义渲染器,从而使得weex可以通过自定义渲染器的方式来扩展,而不是直接fork源码来改的方式。
支持Fragment(多个根节点)和Protal(在dom其他部分渲染组建内容)组件,针对一些特殊的场景做了处理。
基于treeshaking优化,提供了更多的内置功能。

 
四、关于 public 目录的调整。
 
vue 约定 public/index.html 作为入口模板会通过 html-webpack-plugin 插件处理。在构建过程中,资源链接将会自动注入其中。除此之外,vue-cli 也自动注入资源提示( preload/prefetch ), 在启用 PWA 插件时注入 manifest/icon 链接, 并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。
在 JavaScript 或者 SCSS 中通过 相对路径 引用的资源会经过 webpack 处理。放置在 public 文件的资源可以通过绝对路径引用,这些资源将会被复制,而不经过 webpack 处理。
 
以上就是vue3.0 的一些新特性,仅供大家参考!



爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战。

我们前端课程的五大优势:

1. 名师亲自授课,课程无缝隙对接企业
2. 免费学习一周
3. 签订就业协议,目前学员平均就业薪资12K
4. 采取小班教学模式(一个班20—30人)
5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
 

学习热门技术,让自己更值钱

仅仅花费5个月的时间

从小白蜕变成老司机

这5个月的认真学习,刻苦训练

将会收获你意想不到的硕果

 

关注微信公众号「爱创课堂网络科技」

获取前端相关技术干货、资讯、高薪职位等
 

前端疑难解答、学习咨询、视频资源

 请扫码添加微信:haomei0452 


访问 www.icketang.com 获取更多信息。