My frist Vue project

发表于   |   分类于

介绍

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.技术栈

使用到的技术栈如下：
技术栈图

目录结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

├─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.主要技术点分析

  • 路由：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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>

      子：

      1
      2
      3
      4
      props: {
        dialogData: Object,
        rendom: Number
      }

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

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

      子：

      1
      this.$emit('message', data)

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

      1
      var bus = new Vue()
      1
      2
      // 触发组件 A 中的事件
      bus.$emit('id-selected', 1)
      1
      2
      3
      4
      // 在组件 B 创建的钩子中监听事件
      bus.$on('id-selected', function (id) {
        // ...
      })

小结

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