前端技术方案-vue-cli

hyman
450 阅读5分钟

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

什么是 vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

什么是vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

  • 通过 @vue/cli 实现的交互式的项目脚手架。

  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

  • 一个运行时依赖 (@vue/cli-service)，该依赖：

    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置；
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。

  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

vue-cli解释

  • core 核心

image.png

  • Watcher 监听

image.png

  • webpack打包

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

image.png

vue-cli 构建的项目能做什么

  • 读写文件: 通过 fis.match 读文件，release 配置文件的输出路径。

  • 资源定位: 解析文件之间的依赖关系和文件位置。

  • 文件指纹: 在通过 useHash 配置输出文件时为文件 URL 加上 md5 戳，来优化浏览器的缓存。

  • 文件编译: 通过 parser 配置文件解析器做文件转换，例如将 ES6 编译成 ES5。

  • 压缩资源: 通过 optimizer 配置代码压缩方法。

  • 图片合并: 通过 spriter 配置合并 css 里导入的图片到一个文件中，来减少 Hπp 请求数。

开发规范

  • 遵循eslint 代码规范
  • 遵循stylelint 代码规范

内部约定

内部约定

  • 命名（见名知意，包括文件名在内），
  • 目录按照目录规范使用
  • 注释（复杂功能类，复杂逻辑类必须要有），
  • 注意性能优化，按需使用插件，
  • 提取代码：调用大于等于2的代码和组件调用需要提成公用
  • 方法参数理论上不能超过3个
  • 不允许硬编码
  • 全局样式，和命名空间，避免注意样式的优先级冲突
  • 代码追溯（注释遵守git提交规范），
  • git库代码质量，提交代码的时候使用 husky进行 eslint代码检测，存在error 时不能commit成功 安全
  • 安全性 使用成熟开源代码包

image.png

基础组件

我们是有自己的一套组件库，该组件库是一个单独的UI项目，并由专人日常维护和及时更新，项目均基于npm或yarn进行安装即可引入到项目中使用

Vue 的优势

1. 社区活跃度高和使用量高

从上面的数据统计调查来看，Vue 社区活跃度排行第一，使用量增长率高，说明 Vue 是通过了众多团队验证和认可，可靠性高。

2. 完全开源

vue 是完全免费开源

3. 资料文档齐全

Vue 官网有详细的学习文档，社区大量的学习资料

4. 成本低

与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

5. 开发效率高

组件化，视图,数据,结构分离，极大的提升了开发效率，有利于业务的扩展和后期维护

6. 数据与视图双向绑定

传统前端框架 EasyUI 、bootstrap 等基于JQuery框架，jQuery是使用选择器选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

7. 性能高

虚拟DOM，运行速度更快

8. 组件丰富

element ivuew ant 都对vue提供支持

avatar
文章
阅读
粉丝