基于Vue移植构建后台控制系统（一）

一、背景与目的

1.1 项目相关

原项目是一个基于AngularJS构建的工程——直接复用其他项目的代码——由于对AngularJS所知不多（而且AngularJS学习成本相对较高），虽然可以照葫芦画瓢完成一定的功能开发，但是灵活性却差了很多，而且一些非功能性的bug也解决不了。

Others：控制台又打不开了...
Me：我看看，嗯，这个是AngularJS的问题，重新输入URL刷新一下就好了；
Others：把这个问题解决一下呗，每次都要重新搞一下...
Me：额，这个不会解呀！（好尴尬呀...）
----------------------------------------------------------------------------------
 Others：控制台出问题了，全是乱码...
Me：我看看，嗯，这个不是乱码，是代码直接显示了，应该是AngularJS的问题，清一下缓存就可以了；
Others：这个问题一定要解决的吧，都乱码了...
Me：这个不是乱码，额，这个也不会解呀！（好尴尬呀...）

如此场景出现太多，作为一位开发，总会有不好意思的时候！

1.2 技术相关

Vue太火，不解释！
Vue相对比较简单，不解释！
Vue和AngularJS一样，有对应的路由系统，比较适合开发单页面应用（后台控制系统是典型的单页面应用）

二、起步——了解Vue语法

Vue的学习和JS的学习其实并没有太大的区别：
第一阶段学习完基础的语法就可以出发了；
第二阶段学习使用一些三方工具或者三方库来快速开发；
第三阶段需要学会使用一些模块化的开发，重构提炼更多的公共代码；
第四阶段学会能够使用一些比较高级的语法或技巧来更简洁的完成功能开发；
第五阶段成为能够提供好的三方库组织中的一员。
了解Vue有3个月了，目前第二阶段末尾和第三阶段开始。

2.1 官网教程笔记

基础语法的学习，直接官网就可以，这里只是一个小小的大纲，详情请移步Vue官网：http://cn.vuejs.org/v2/guide/index.html 。
2.1.1 基础

1、Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM;
2、双向数据绑定；
3、组件化；
-------------------------------------------------------------------
4、Vue实例的属性和方法；（data、method）
5、Vue实例的声明周期；（mounted）
-------------------------------------------------------------------
6、模板语法：
    6.1、文本：插值{{}}、v-html；
    6.2、属性：v-bind:、:；
    6.3、指令、修饰符、过滤器；
    6.4、常用指令：v-bind:class、v-bind:style、v-module、v-if、v-show、v-for、v-on:click；
-------------------------------------------------------------------
7、计算属性；（computed、watch）
-------------------------------------------------------------------
8、组件：
    8.1 全局注册；
    8.2 局部注册；
    8.3 模板解析is；
    8.4 父子组件：props down, events up ；
    8.5 内容分发：slot；
    8.6 组件三部分：
        8.6.1 Props 允许外部环境传递数据给组件
        8.6.2 Events 允许组件触发外部环境的副作用
        8.6.3 Slots 允许外部环境将额外的内容组合在组件中

三、Hello World

其实在学习Vue基础的过程中，就应该完成了Hello World的过程，然而这里强调Hello World主要基于两个方面：

1、Vue中Hello World的真意
    1.1 通过Hello World学习实践基本语法以及写法；
    1.2 用最简单的代码完成最简单最单一的功能；（区别于vue-cli）

2、脚手架Vue-cli
绝大多数人刚开始接触Vue，便走上了Vue-cli搭建项目的道路主要基于几个方面的原因：
    2.1 Vue-cli作为官方脚手架，太容易从官网中脱颖而出；
    2.2 大型项目用脚手架搭建比较方便；
    2.3 而小项目其实也没有太大的必要用Vue了；
    2.4 对于基于有成的（马上做项目）来说，直接进入脚手架的节奏更快一些。

至于Vue-cli的具体操作:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

四、更多期待——
基于Vue移植构建后台控制系统（二）——Vue全家桶。