腾讯DeepOcean原创文章： dopro.io/explore-vue…

就在前几个月，Vue star 数突破了 100k，正式超越 React。

一、扯点家常

都说前端是个更新迭代飞快的领域，前端框架的演进也越来越激烈，以至于在技术社区里总看到有人求饶：“求不要更新了，老子学不动了”。

在过去的好多些年，jQuery 在前端领域都处于统治地位，在众多框架中脱颖而出，很多写惯了 jQuery 语法的开发者们，都发现再也回不去写原生 JS 了。随着时间的发展，也出现了各式各样的优秀框架，难免不同框架的粉丝也会把不同框架拿来对比，甚至互掐。说说今日的主角，Vue，在近几年也是非常火的一个框架。对于初学者来说，Vue 上手的成本真的很低了，易用度非常高，并且因为是国内开发者开发的，文档都是中文，国内大批量的公司都在使用，也导致了 Vue 的增速特别快。

不过也正是有不同框架的更新迭代，相互竞争，才创造一个越来越好的前端世界。正如 Vue 开发者在 twitter 发布的一条信息：

二、初入 Vue 大门

Vue 是一套用于构建用户界面的渐进式框架。它有着如下特点：

• 渐进式框架，采用自底向上增量开发设计
• 模版双向绑定机制
• 利用指令（directive）对 DOM 进行封装
• 组件化设计思想

Vue 的组件化将 UI 页面分割为若干组件进行组合和嵌套

工欲善其身，必先利其器。

无论我们学习哪种框架，搭建环境是必经之路。Vue 提供了一个官方的 CLI，为单页面应用快速搭建繁杂的脚手架。当然，任何的前提都是首先你了解了 Vue 相关的概念，不然新手一上来搭建 Vue-cli，看到里面牵扯到的 webpack、npm、nodejs等等概念，也是会一脸懵逼，很容易有从入门到放弃的想法的。

在搭建 Vue-cli 这点上，我们不妨直接站在巨人的肩膀上，这里有一篇带大家快速开启第一个 Vue 页面的教程，非常推荐： juejin.im/entry/58f48… 。

三、Vue 组件化

天下武功，唯快不破。

组件化的好处不用一一细说大家都知道了，组件是 Vue.js 最强大的功能之一，让我们用独立可复用的小组件来构建大型应用，开发效率更快更敏捷。为了更好地复用，这里以建立弹窗组件为实例，谈谈如何建立一个项目的组件库。

1. 组件库结构

1. qqcartoon-ui // 组件库名字

2. ├── index.js // 组件文件

3. ├── aa1 // 各个组件包

4. ├── bb1

5. ├── dialog

6. ├── index.js // 组件注册

7. ├── src

8. ├── index.scss // 组件样式

9. ├── index.vue // 组件结构

10. ├──

11. └── ...

一般在 Vue 里，我们会把组件写在 components 里，但是为了建立一个可以多个项目共用的组件库，这里重新命名，如 qqcartoon-ui 。

• index.js： 收录了组件库里各个组件，以作为实例引用的入口。

1. import UIDialog from './dialog/index'

2. import UIA from './aa1/index'

3. import UIB from './bb1/index'

5. export {

6.  UIDialog,

7.  UIA,

8.  UIB

9. }

•  dialog/index.js： 完成组件注册。

1. import UIDialog from './src/index';

3. UIDialog.install = function(Vue){

4.    Vue.component(UIDialog.name,UIDialog);

5. };

7. export default UIDialog;

• dialog/index.scss： 组件样式。

1. .ui-dialog {

2.    position: fixed;

3.    top: 0px;

4.    left: 0px;

5.    width: 100%;

6.    height: 100%;

7.    z-index: 9999;

8.    -webkit-box-orient: horizontal;

9.    -webkit-box-pack: center;

10.    -webkit-box-align: center;

11.    background: rgba(0,0,0,0.4);

12. }

13. ...... 省略其余样式代码

• dialog/index.vue： 组件结构。组件的模版只能有一个根元素。

2. 组件的引用

在项目的根目录下，你可以找到一个 js 文件，可能它的命名是 main.js。在里面引入你需要的组件名。

import {UIDialog} from '@/qqcartoon-ui/packages/index'
Vue.use(UIDialog)

这个时候，弹窗组件就已经引用到项目中了，这时候只需要最后一步，在项目 vue 文件里使用：

这个时候编译代码，就可以在浏览器看到最终的弹窗效果啦！

四、Vue 组件规范化

没有规矩，难成方圆。

要搭建一个好的组件库，应该一开始要定下一些通用的规矩。

1. 命名

组件的命名应该与业务无关，而是根据组件实现的功能来进行命名。同时，也应该与业务文件命名区分开来，可以加一些特有的前缀。例如在这里，所有组件前缀都添加 “UI” ，弹窗组件命名为 “UIDialog”。

2. 实现

可复用组件实现的应该是通用的功能，它实现的应该是：

2.  

   我是子组件的标题

3.  

4.    只有在没有要分发的内容时才会显示。

5.