vue3.0是什么时候发布的?
推荐课程:vue教程
Vue作者尤雨溪宣布在Medium上正式发布Vue CLI 3.0,这也将为众多开发者带来期待已久的新功能。
丰富的内置函数
尤雨溪表示,Vue CLI 3.0与其他版本完全不同,它经过了重建,以:
1,尽量减少现代前端工具在配置上的麻烦,尤其是开发者混合使用多种工具时;
2.尽可能在工具链中加入最佳实践,并使之成为Vue应用的默认实践。
Vue CLI的核心目标是为基于webpack 4的预配置构建提供设置,目标是最大限度地减少开发人员配置它的次数,因此Vue CLI 3支持具有以下特征的现成项目:
(1)预配置的webpack功能,如模块热替换、代码拆分、树抖动、高效持久缓存等。
(2)es 2017由Babel 7+preset-env(Babel插件)转化,根据使用情况注入polyfill。
(3)支持PostCSS(默认启用autoprefixer)和所有主要的CSS预处理程序。
(4)现代模式:并行发布原生ES2017 +bundle和传统bundle(详情如下)。
(5)多页面模式:构建一个具有多个HTML/JS入口点的应用。
(6)构建目标:将Vue单文件组件构建成库或原生Web组件(具体如下)
此外,在创建新项目时,您可以混合和选择各种集成:
以打字打的文件
艾滋病患者
Vue路由器及配件。Vuex
ESLint / TSLint /更漂亮
用Jest或Mocha进行单元测试
用赛普拉斯或守夜人进行E2E试验。
而且Vue CLI可以保证以上所有功能一起很好的使用。
可以在不弹出的情况下配置。
上面列出的函数都支持零配置:用Vue CLI 3构建项目时,会安装Vue CLI运行时服务(@ vue/cli-service),选择函数插件,生成必要的配置文件。换句话说,你只需要专注于你的代码。
CLI工具在删除潜在依赖关系时通常会失去微调这些依赖关系的能力,因此用户通常必须“退出”才能进行更改。这样做的缺点是,一旦弹出,从长远来看,你将无法升级到该工具的最新版本。
尤雨溪认为以低级方式访问配置非常重要,但他不想抛弃那些“弹出”用户,所以他找到了一种没有弹出的配置方法。
对于第三方集成,如Babel、TypeScript和PostCSS,Vue CLI尊重这些工具的配置文件。Webpack用户可以使用webpack-merge将简单的对象合并到最终的配置中,或者使用webpack-chain精确定位和调整现有的加载器和插件。
此外,Vue CLI附带了vue inspect命令,可帮助您检查内部Webpack配置。最大的优势是,您仍然可以升级CLI服务和插件,只需稍作调整即可进行修复或更新,而无需弹出。
可扩展插件系统
Vue CLI 3的插件系统非常强大:可以在应用的搭建阶段注入依赖关系和文件,调整应用的webpack配置,或者在开发过程中向CLI服务注入其他命令。像TypeScript这样的大多数内置集成都使用plugin API来实现插件功能。
而且,Vue CLI 3已经没有“模板”了。相反,您现在可以远程设置它,并与其他开发人员共享您的插件和选项。
图形用户界面(GUI)
得益于Guillaume Chau(Vue . js的核心团队)的出色表现,Vue CLI 3还自带了完整的GUI,不仅可以新建项目,还可以管理项目中的插件和任务,比如:
它不需要电子,用vue ui启动就可以了。
注意:虽然Vue CLI 3处于稳定版本,但UI仍处于测试阶段,会不断更新。
即时原型制作
有时候我们需要马上去拜访工作环境以获得新的灵感,等待npm安装就成了一件麻烦的事情。使用Vue CLI 3的Vue serve命令,您只需要启用Vue单个文件组件来执行原型设计:
更多功能
现代模式
有了Babel,你可以使用ES2015+中所有最新的语言特性,但这也意味着我们需要翻译和multifill捆绑来支持旧的浏览器。这些转换后的包通常比原始的本地es 2015+代码更加冗长,解析和运行速度也更慢。既然现在大部分现代浏览器都支持原生es 2015+代码,那它肯定也支持更老的代码,但是浏览器运行这样低效的代码是一种浪费。
使用“现代模式”可以帮助你解决这个问题。在构建时,使用以下命令:
Vue-CLI-service build-modern Vue CLI会生成两个版本的应用:一个是支持es模块的Modern浏览器的Modern软件包,另一个是不支持ES模块的old浏览器的old软件包。
生成的HTML文件自动采用Phillip Walton的帖子中讨论的技术:
& ltscript type="module " >现代软件包可以在支持它的浏览器中加载;你也可以使用
你可以用
& lt脚本模块& gt的修补程序将自动注入Safari 10。
对于Hello World应用程序,现代软件包减少了16%。在实际应用中,现代软件包通常会显著加快解析和评估的速度,从而提高应用程序的加载性能。
注意:现代模式不设置为默认设置的原因是,如果使用CORS/CSP,将需要更长的构建时间和一些额外的配置。
构建Web组件
现在,您可以构建任何*。vue组件到Vue CLI 3项目中的Web组件:
Vue-CLI-service build-Target WC-Name My-Element src/My component . Vue这样会生成一个JavaScript包,把内部的Vue组件封装起来,注册成页面上的原生自定义元素,然后就可以当作人工的了
您甚至可以构建多个*。将vue组件打包成具有多个代码分割的包:
vue-CLI-服务构建-目标WC-async' src/components/*。' vue '在生成的包中包含一个小的入口文件,将所有组件注册为原生自定义元素,但只有在页面上第一次实例化对应的自定义元素时,才能获得底层Vue组件的代码。
借助Vue CLI 3,您还可以使用相同的代码库来构建应用程序、UMD库或本地Web组件。
最后,尤雨溪表示,Vue CLI 3现在可以作为Vue应用程序的标准构建工具,但这只是开始。如上所述,Vue CLI的长期目标是将当前和未来的最佳实践集成到工具链中,并最终为用户提供高性能的应用程序。