My frist Vue project

[Hancoson]

介绍

Vuejs火了有一段时间了，但是之前自己还没有一个线上项目中使用它。刚搞公司前一段时间有个新项目要开发，再加上大BOSS那边要求使用Vuejs来做，自己也就毫不犹豫的接了下来，并用了Vuejs作为开发框架。那为什么要用它呢？有以下原有：

• 易用/灵活/性能（哈哈~来自官网）
• 对自身的技术面的拓展和提升
• 后台项目，表单编辑比较多，很适合使用双向绑定的方式来控制data和view
• 公司层面希望技术栈统一

过程

技术

1.构建工具

构建工具方面参考了尤大大的[vue-cli](https://github.com/vuejs/vue-cli)和vue-element-admin(https://github.com/PanJiaChen/vue-element-admin)，当然也可以看看自己的小(DEOM)[https://github.com/Hancoson/vue-manage]。也基本都是copy第三方的，没有自己去造轮子。

2.技术栈

使用到的技术栈如下：

目录结构：

├─index.html      //页面入口
├─build           //构建配置
├─config          //构建配置文件
├─package.json    
├─yarn.lock
├─README.md
└─src             //资源目录
    │  App.vue    //vue入口
    │  main.js    //总入口文件
    ├─assets      //静态资源目录
    │  ├─img      
    │  ├─mock     //mock数据
    │  └─scss
    ├─components  //组件目录
    │  ├─common   //公用组件
    │  │  ├─home
    │  │  │      home.vue
    │  │  ├─layout
    │  │  │      header.vue
    │  │  └─……  
    │  └─pages    //页面
    │      ├─index
    │      │      index.vue
    │      └─……
    ├─router      //路由
    └─utils       //工具函数

3.主要技术点分析

• 路由：

export default new Router({
  //mode: 'history',

  routes: [
    {
      path: '/',
      redirect: '/admin/index/carousel'
    }, {
      path: '/',
      component: resolve => require(['../components/common/home/home.vue'], resolve),
      children: [
        //首页
        {
          path: '/',
          component: resolve => require(['../components/pages/focus/Index.vue'], resolve)
        },
        ……
      ]
    }
  ]
})

• 数据流：
  

  • 父组件到子组件，在父组件调用子组件时通过v-bind(:)绑定动态数据，在子组件，使用Prop方法（单项绑定，防止数据倒流）

    父：
    <edit-dialog :dialogData="dialogData" :rendom="new Date().getTime()"></edit-dialog>

    子：

    props: {
      dialogData: Object,
      rendom: Number
    }
    

    子组件中通过watch方法来监控数据是否改变，可触发相应的方法。

  • 子组件到父组件，在父组件中使用v-on(@)绑定自定义事件接收，在子组件中使用$emit来监控，并传给回掉。
    父：
    <edit-dialog @message="recieveMessage"></edit-dialog>

    子：

    this.$emit('message', data)
    

  • 非父子组件，有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：

    var bus = new Vue()
    

    // 触发组件 A 中的事件
    bus.$emit('id-selected', 1)
    

    // 在组件 B 创建的钩子中监听事件
    bus.$on('id-selected', function (id) {
      // ...
    })
    

小结

乱七八糟的写了很多，也算是对这段时间用vue.js的一个回顾。不得不承认，在使用vue.js的过程当中开始逐渐喜欢上了这个优美而简洁的框架。因此也愿意跟更多的人分享使用它的经验。也欢迎大家一起交流。

[Hancoson]

一张图了解VUE

来源：2018 我所了解的 Vue 知识大全