学习Vue(一)

因为想用leancloud开发自己的app嘛，所以进行了一些构想，我初期的设想是，express+leancloud搭建后台，vue搭建前台，并处理一些逻辑。

Vue是早就知道的，但一直也就知识了解没深入研究过。所以在伯乐在线找了这篇文章。想把vue从头学习一下，当然官方的文档我也是看了的。

因为用了vue的脚手架，里面的一些配置还是不适应，尤其是eslint…经常报一些格式上的错误，导致程序都无法运行。没办法，这次只能规规矩矩的写，毕竟之前在公司也没什么硬性的代码格式规定，但是既然是自己做项目，那么就要规范起来。
在.eslintrc中写入了

'rules': {
    'import/no-unresolved': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    "no-console":0,
    "indent": [2, 2, {"VariableDeclarator": 2}]
  }

no-console使得写入console.log命令时eslint不会报错。

Vue.js 60 分钟快速入门看完后的确对vue熟悉了起来，加上脚手架对vue的亲和性，很快的上手起来。最后的那个例子还了解了vue中内置的一些很方便的方法。

1	this.people.push(this.newPerson);

这段代码就似的newPerson这个字段插入了people这个字段中。随后我们就可以在people中访问新插入的newPerson数据。
随后我到官网看了下vue-router,并在测试demo中引入。
首先是在项目中安装vue-router。

1	npm install -S vue-router

之后在APP.vue对应的js上做修改。

import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';
// import routeMap from './router';
/* eslint-disable no-new */
// new Vue({
//   el: 'body',
//   components: { App },
// });
Vue.use(VueRouter);
const Foo = Vue.extend({
  template: '<p>This is foo!</p>',
});
const Bar = Vue.extend({
  template: '<p>This is bar!</p>',
});
// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
const router = new VueRouter();
// 定义路由规则
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
// 创建的组件构造函数，也可以是一个组件选项对象。
// 稍后我们会讲解嵌套路由
router.map({
  '/foo': {
    component: Foo,
  },
  '/bar': {
    component: Bar,
  },
});
// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
router.start(App, 'app');

之后对vue还会深入的( ‵▽′)ψ