yugasun

you-may-not-know-vuejs

  • Published on
    相信大多数使用 Vue 项目都会面临国际化的问题,而 [vue-i18n](https://github.com/kazupon/vue-i18n) 便是国际化的不二之选,它用起来非常简单,但是同时也会带来一些问题和挑战。本篇是个人在项目上国际化时一些经验的总结,希望能在国际化的道路上帮到你。
  • Published on
    我们在实际开发过程中,当项目越来越大,组件越来越丰富时,经常会面临一个问题:很多组件会公用一些通用的 `props`、`data` 和 `methods`等声明,但是也会掺杂组件自己的一些私有特有声明,那么我们能不能像类的继承一样,来提炼和继承呢? 当然这是可以的,这里可以通过两个基本 API [extends](https://cn.vuejs.org/v2/api/#extends) 和 [mixins](https://cn.vuejs.org/v2/api/#mixins) 来实现。这两个API是可以相互替换的,唯一的区别是,`extends` 属性接受的通常是个单一组件对象,而 `mixins` 属性接受的是个组件对象数组。当他们只继承单一组件时,是可以互换的。由于本人开发中,习惯使用 `mixins`,所以本文所有实例均使用 `mixins` 来实现。
  • Published on
    有了前面文章的铺垫,相信一路看过来的新手的你开发一个中型的 Vuejs 应用已经不在话下,包括 Vuejs 生态核心工具(vue-router,vuex)的使用也不成问题。但是在实际项目开发过程中,我们要做的工作不仅仅是完成我们的业务代码,当一个需求完成后,我们还需要考虑更多后期优化工作,本篇主要讲述代码层面的优化。
  • Published on
    今天来聊聊 Vue.js 中的状态管理,也许一提到状态管理,大家首先想到的就是 [vuex](https://github.com/vuejs/vuex/),但是如果你的应用够简单,其实是不需要使用 vuex 的,反而会让你的项目变得繁琐起来。
  • Published on
    对于单页面应用,前端路由是必不可少的,官方也提供了 [vue-router 库](https://github.com/vuejs/vue-router) 供我们方便的实现,但是如果你的应用非常简单,就没有必要引入整个路由库了,可以通过 Vuejs 动态渲染的API来实现。
    我们知道组件可以通过 `template` 来指定模板,对于单文件组件,可以通过 `template` 标签指定模板,除此之外,Vue 还提供了我们一种自定义渲染组件的方式,那就是 [渲染函数 render](https://cn.vuejs.org/v2/guide/render-function.html),具体 `render` 的使用,请阅读官方文档。
    接下来我们开始实现我们的前端路由了。
  • Published on
    虽然 Vue.js 已经足够强大了,但是在实际开发中,我们还是需要引入各种模块来实现我们的功能需求,或者给全局的 Vue 对象添加一些全局功能,而 Vue `插件` 就是来帮助我们完成这项工作的。
  • Published on
    Javascript 是一门弱类型语言,所以语法检查变得尤为重要。虽然有很多前端IDE开发工具,可以很好地帮助我们提示在编写时的错误,但是大多数开发者还是使用的像 `Sublime Text`、`Visual Studio Code` 之类的轻量级编辑器,这导致在开发中很容易出现各种错误,比如单词拼写错误,漏掉了括号等。而且每个人的代码编写习惯也不一样,因此有的项目的代码格式千差万别,比如 `缩进空格数`,有的习惯4个,有的习惯2个,这也导致项目维护起来越来越麻烦,遇到错误也很难定位。因此对 `Javascript` 进行语法检查的工具应运而生,目前 [ESLint](https://eslint.org/) 使用最为广泛。这篇将讲解如何将 `ESLint` 集成到我们的项目中。
  • Published on
    组件(Component)绝对是 Vue 最强大的功能之一。它可以扩展HTML元素,封装可复用代码。从较高层面讲,可以理解组件为自定义的HTML元素,Vue 的编译器为它添加了特殊强大的功能。所有的 Vue 组件同时也都是 Vue 的实例,因此可以接受相同的选项对象(除了一些特有的选项)并提供相同的生命周期函数。
  • Published on
    当然,Vue 除了核心功能默认内置的指令外,更强大的是它允许注册自定义指令,这是个让我非常惊喜功能。因为当初在使用 `Angular1.x` 时就特别喜好自定义指令这个功能,没想到 Vue 也借鉴了进来,让我能够灵活对 DOM 进行底层操作,而且它具有非常高的复用性,书写起来也非常简洁。
    当然在 Vue 中,代码的复用和抽象的主要形式还是 `组件`,这将在下一节中讲到。
  • Published on
    虽然说是Vuejs实践,但是有些重要的理论还是必不可少的,本文将简单的带你了解 `Vuejs的响应式原理`。
    > Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 Javascript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样非常重要,这样你可以回避一些常见的问题。
  • Published on
    一般提到一个框架时,大家都喜欢跟其他框架作对比,以说服读者去使用它,但是这里就不做对比了,是不是很失望?每个人都有每个人的好,何况是由人创造出来的框架呢,单凭 [vuejs](https://github.com/vuejs/vue) 在github上8W+的star,那也值得你去尝试一回,不是吗?
    当然如果你有框架选择恐惧症,那么不妨相信我一回,直接跟着我亲自上手体验吧~
  • Published on
    《你也许不知道的Vuejs》系列文章是本人在过去一年多的时间里,从完全不知道Vuejs到熟练地使用Vuejs开发各种复杂的大型项目,从不同项目开发实践中总结的一些经验和技巧类文章。重点带你一步步熟悉如何使用Vuejs来开发基本的项目,包括周边生态中,一些较热门工具的使用和技巧,同时也会分享当面对较复杂功能需求时候,如何去分析和处理的过程。