12 Vue学习 项目技术栈

vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui

1:vuex:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式:  让我们从一个简单的 Vue 计数应用开始：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的极简示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

　　对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

2: vue-router

　　vue的路由相关技术，前面有介绍。

3： webpack 

4： ES6/7 

         ECMAScript 6/ECMAScript 7, javaScript的新版本。 有很多新特性。

5：less 

　　Less类似于jQuery,它在CSS的语法基础之上引入了变量、混合、运算以及函数等特性。简化了CSS使用，降低了CSS维护成本，让CSS可编程，让代码更加优雅，以更少的CSS代码做更多的事

6：element-ui:

　　一套基于 Vue 2.0 的桌面端组件库,element-ui是一个比较完善的UI库.