Vue CLI 3.0 正式发布,Vue.js 开发标准化工具

我是小探花 2018-08-16 15:18:33 ⋅ 74 阅读

作者:王练

文章转载自 开源中国社区 http://www.oschina.net



Vue CLI 3.0 已发布,该版本经历了重构,旨在:


  1. 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时;

  2. 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践。


Vue CLI 是 Vue 应用的标准化构建工具(链),核心是提供基于 webpack 4 构建的预配置构建设置,目标是最大限度地减少开发者必须经历的配置过程。因此,Vue CLI 3 对具备以下特点的项目都支持开箱即用:


  • 预配置的 webpack 功能,如模块热替换、代码分割、 摇树优化(tree-shaking)、高效持久化缓存、错误覆盖等;

  • 通过 Babel 7 + preset-env 对 ES2017 进行转换和基于使用情况的 polyfill 注入

  • 支持 PostCSS(默认启用 autoprefixer)和所有主要的 CSS 预处理器

  • 具有 hashed asset link 和预加载/预取资源提示的 Auto-generated HTML

  • 通过 .env 文件的模式和级联环境变量 

  • 现代模式:并行发布原生 ES2017 +bundle 和传统 bundle

  • 多页面模式:构建具有多个 HTML / JS 入口点的应用程序

  • 构建目标:将 Vue 单文件组件构建为库或原生 Web 组件


此外,你可以在创建新项目时混合使用多种可选集成,包括:


  • TypeScript

  • PWA

  • Vue Router & Vuex

  • ESLint / TSLint / Prettier

  • 通过 Jest 或 Mocha 进行单元测试

  • 通过 Cypress 或者 Nightwatch 进行 E2E 测试


最重要的是,Vue CLI 确保所有上述功能可以很好地协同工作,不必自己进行连接。 


无需 Eject 即可配置


上面列出的所有功能都可以零配置:当通过 Vue CLI 3 构建项目时,它会安装 Vue CLI 运行时服务(@ vue / cli-service),选择功能插件,并生成必要的配置文件。在多数情况下,你只需要专注于编写代码。


但是,试图抽象掉底层依赖关系的 CLI 工具通常会剥离对这些依赖关系进行微调的内部配置的能力 - 为了进行这种更改,用户通常必须 “eject”,即检查原始配置到项目,以便进行更改。这样做的缺点是,一旦 eject ,从长远来看,将无法升级到最新版本的工具。


开发团队承认能够更低级别访问配置的重要性,但也不想抛弃那些 “eject” 用户,因此找到了一种方法来不用 eject 即可调整配置的方法。


对于 Babel,TypeScript 和 PostCSS 等第三方集成,Vue CLI 会尊重这些工具的相应配置文件。对于 webpack ,用户可以利用 webpack-merge 将简单对象合并到最终配置中,或者通过 webpack-chain 精确定位和调整现有的加载器和插件。此外,Vue CLI 附带 vue inspect 命令可帮助检查内部 Webpack 配置。最大的好处是,你不需要为了进行小的调整而 eject  - 你仍然可以升级 CLI service 和插件以接收修复和新功能更新。




可扩展的插件系统


Vue CLI 3 的插件系统非常强大:它可以在应用程序的 scaffolding 阶段注入依赖项和文件,并调整应用的 webpack 配置或在开发期间向 CLI service 注入其他命令。大多数像 TypeScript 这样的内置集成都使用相同的插件 API 实现为插件功能,所有这些 API 都可用于所有社区插件。如果有兴趣编写自己的插件,请查阅插件开发指南。

在 Vue CLI 3 中,不再拥有“模板”(template) - 相反,你可以创建自己的远程设置,并与其他开发者共享你选择的插件和选项。


图形用户界面 (GUI)


Vue CLI 3 附带了一个完整的 GUI ,不仅可以创建新项目,还可以管理项目中的插件和任务。甚至还带有下面这种花哨的 webpack 仪表板 :



即时原型(Instant Prototyping)


在编写代码之前等待 npm install 并不好玩。有时我们只需要即时访问工作环境即可获得灵感的火花。使用 Vue CLI 3 的 vue serve 命令,你只需要启用 Vue 单文件组件即可进行原型设计。



原型开发服务器和标准应用具有相同的设置,因此你可以轻松地将原型 *.vue 文件移至正确的脚手架项目的 src 文件夹中以继续处理它。


更多更新细节可查阅发行说明。

Get started :https://cli.vuejs.org/zh/guide/


关注我们

如果需要源码和素材可以关注“IT实战联盟”公众号并留言(微商城源码,5个字会收到源码下载地址,一定要看源码里面的操作手册会少走很多弯路),也可以加入交流群和作者互撩哦~~~


---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦



全部评论: 0

    我有话说:

    Vue 3 正式发布

    Vue.js 3.0 "One Piece" 已正式发布,此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API,并为框架未来的长期

    Vant 3.0 正式发布:全面拥抱 Vue 3

    历经八个月时长的开发,Vant 3.0 现已正式发布。官方表示,在本次迭代中,其主要工作是基于 Vue 3 重构整个代码仓库和周边生态,并发布 Vant 3.0、Vant Cli 3.0

    Vuex 4 正式发布

    Vuex 4 已正式发布,此版本的更新重点是提供更好的兼容性。从 release note 可以看到,Vuex 4 不但支持 Vue 3,并且提供与 Vuex 3 完全相同的 API,因此用户可以在

    「尝鲜」SpringBoot 快速整合Swagger 3.0

    第一步:Maven引入Swagger3.0 starter依赖 Maven项目中引入springfox-boot-starter依赖: <dependency> <

    Element Plus 发布 Beta 版本,适配 Vue 3.0 的 Element

    Element 开发团队宣布推出 Element Plus 首个 Beta 版本,官方表示 Element Plus 是 Element 对 Vue 3.0 的升级适配。 地址:https

    WebMIS 1.0.0 beta.3 发布,全栈开发基础框架

    全栈开发基础框架,包括 PHP / Python / SpringBoot / Phalcon / Flutter / NodeJS / Vue / Swoole / Redis / API 等技术

    精品推荐:基于Vue2.0高仿微信App的单页应用 学习Vue新动力!

    利用Vue2.0模仿微信app,基本做到了以假乱真的效果

    Element 2.14.1 发布,基于 Vue 的桌面端组件库

    Element 2.14.1 发布了。Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源

    VUE 开源库收藏版(二):史上最全面的学习资源 ,附GitHub源码地址

    最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star。

    京东技术:京东风格的移动端Vue组件库NutUI2.0来啦

    移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注。据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI 。

    Fes.js v0.4.1 版本发布,一套优秀的中后台系统前端解决方案

    Fes.js 是一套优秀的中后台前端解决方案。提供初始项目、开发调试、Mock接口、编译打包的命令行工具。内置布局、权限、数据字典、状态管理、存储、Api等多个模块。以约定、配置化、组件化的设计思想

    最全Mac工具

      MacTool Mac 开源免费工具汇总, 只罗列开源好用的。更全列表请参考awesome-mac 必备 Homebrew - 体验通过命令行安装 Mac 软件的工具(大部分是

    VUE 开源库收藏版(一):史上最全面的学习资源 ,附GitHub源码地址

    VUE 开源库收藏版(一):史上最全面的学习资源 ,附GitHub源码地址

    【老兵不朽】时隔1年,jQuery 发布 3.4.0 新版

    jQuery 团队的核心开发者 Timmy Willison 在官网正式宣布 jQuery 3.4.0发布

    工具集001

      1.  Google项目管理工具 Tables   2. 终端 taskwarrior --- TODO List Taskwarrior is

    Scala.js 1.4.0 发布,将 Scala 编译成 JavaScript

    Scala.js 1.4.0发布。Scala.js 是一个将 Scala 语言编译成 JavaScript 的工具,以便可以直接在浏览器上使用 Scala 编写程序。 Scala.js

    Node.js 15.6.0 发布

    Node.js 15.6.0 发布,Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。 此版本主要更新内容包括: child_process: 添加

    Gfast 工作流引擎 1.0 正式发布

    Gfast管理系统采用go语言开发,基于GF(Go Frame)的后台管理系统,现增加工作流引擎模块开源发布,实现工作流引擎与业务解绑,不同业务数据均可接入,以业务数据驱动的状态机机制,让