vuejs

相信大多数使用 Vue 项目都会面临国际化的问题，而 [vue-i18n](https://github.com/kazupon/vue-i18n) 便是国际化的不二之选，它用起来非常简单，但是同时也会带来一些问题和挑战。本篇是个人在项目上国际化时一些经验的总结，希望能在国际化的道路上帮到你。

我们在实际开发过程中，当项目越来越大，组件越来越丰富时，经常会面临一个问题：很多组件会公用一些通用的 `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` 来实现。

有了前面文章的铺垫，相信一路看过来的新手的你开发一个中型的 Vuejs 应用已经不在话下，包括 Vuejs 生态核心工具（vue-router，vuex）的使用也不成问题。但是在实际项目开发过程中，我们要做的工作不仅仅是完成我们的业务代码，当一个需求完成后，我们还需要考虑更多后期优化工作，本篇主要讲述代码层面的优化。

今天来聊聊 Vue.js 中的状态管理，也许一提到状态管理，大家首先想到的就是 [vuex](https://github.com/vuejs/vuex/)，但是如果你的应用够简单，其实是不需要使用 vuex 的，反而会让你的项目变得繁琐起来。

对于单页面应用，前端路由是必不可少的，官方也提供了 [vue-router 库](https://github.com/vuejs/vue-router) 供我们方便的实现，但是如果你的应用非常简单，就没有必要引入整个路由库了，可以通过 Vuejs 动态渲染的API来实现。
我们知道组件可以通过 `template` 来指定模板，对于单文件组件，可以通过 `template` 标签指定模板，除此之外，Vue 还提供了我们一种自定义渲染组件的方式，那就是 [渲染函数 render](https://cn.vuejs.org/v2/guide/render-function.html)，具体 `render` 的使用，请阅读官方文档。
接下来我们开始实现我们的前端路由了。

虽然 Vue.js 已经足够强大了，但是在实际开发中，我们还是需要引入各种模块来实现我们的功能需求，或者给全局的 Vue 对象添加一些全局功能，而 Vue `插件` 就是来帮助我们完成这项工作的。

有了前面几篇文章的铺垫，我相信我们回过头来再看看用 `vue-cli` 脚手架工具初始化的项目，就很好理解了。本篇将带着大家全面认识下用 `vue-cli` 脚手架工具初始化的项目，并会讲解如何定制化自己的项目模板。

Javascript 是一门弱类型语言，所以语法检查变得尤为重要。虽然有很多前端IDE开发工具，可以很好地帮助我们提示在编写时的错误，但是大多数开发者还是使用的像 `Sublime Text`、`Visual Studio Code` 之类的轻量级编辑器，这导致在开发中很容易出现各种错误，比如单词拼写错误，漏掉了括号等。而且每个人的代码编写习惯也不一样，因此有的项目的代码格式千差万别，比如 `缩进空格数`，有的习惯4个，有的习惯2个，这也导致项目维护起来越来越麻烦，遇到错误也很难定位。因此对 `Javascript` 进行语法检查的工具应运而生，目前 [ESLint](https://eslint.org/) 使用最为广泛。这篇将讲解如何将 `ESLint` 集成到我们的项目中。

上一篇中我们已经学会使用 `babel` 将 ES6 转化为 ES5 了，并且展示了一些 ES6 代码，这一篇将重点聊聊 ES6 在 Vuejs 项目中一些部分应用。

在之前的实例中，我们都是通过 `Vue.component` 或者 `components` 属性的方式来定义组件，这种方式在很多中小规模的项目中还好，但在复杂的项目中，下面这些缺点就非常明显了：

组件（Component）绝对是 Vue 最强大的功能之一。它可以扩展HTML元素，封装可复用代码。从较高层面讲，可以理解组件为自定义的HTML元素，Vue 的编译器为它添加了特殊强大的功能。所有的 Vue 组件同时也都是 Vue 的实例，因此可以接受相同的选项对象（除了一些特有的选项）并提供相同的生命周期函数。

具体工具的操作界面和如何使用，这里就不展示了。随便用搜索引擎搜索，就是相关介绍。大家可以根据个人喜好，来选择适合你的开发环境。

当然，Vue 除了核心功能默认内置的指令外，更强大的是它允许注册自定义指令，这是个让我非常惊喜功能。因为当初在使用 `Angular1.x` 时就特别喜好自定义指令这个功能，没想到 Vue 也借鉴了进来，让我能够灵活对 DOM 进行底层操作，而且它具有非常高的复用性，书写起来也非常简洁。
当然在 Vue 中，代码的复用和抽象的主要形式还是 `组件`，这将在下一节中讲到。

虽然说是Vuejs实践，但是有些重要的理论还是必不可少的，本文将简单的带你了解 `Vuejs的响应式原理`。
> Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 Javascript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样非常重要，这样你可以回避一些常见的问题。

一般提到一个框架时，大家都喜欢跟其他框架作对比，以说服读者去使用它，但是这里就不做对比了，是不是很失望？每个人都有每个人的好，何况是由人创造出来的框架呢，单凭 [vuejs](https://github.com/vuejs/vue) 在github上8W+的star，那也值得你去尝试一回，不是吗？
当然如果你有框架选择恐惧症，那么不妨相信我一回，直接跟着我亲自上手体验吧~

《你也许不知道的Vuejs》系列文章是本人在过去一年多的时间里，从完全不知道Vuejs到熟练地使用Vuejs开发各种复杂的大型项目，从不同项目开发实践中总结的一些经验和技巧类文章。重点带你一步步熟悉如何使用Vuejs来开发基本的项目，包括周边生态中，一些较热门工具的使用和技巧，同时也会分享当面对较复杂功能需求时候，如何去分析和处理的过程。

前后端分离大家并不陌生，项目开发中，每当前端拿到后端给我的接口，联调的时候，往往前端代码和后端接口是不同源的，所以跨域是不可避免的。而作为一名优秀的前端工程师，怎么会忍受卑躬屈漆的找后端同学，帮忙在接口请求前多添加一行代码,将 `Access-Control-Allow-Origin` 设置为我们前端想要的呢？