学习篇三：Vue

第一步：搭建vue环境

由于之前已经安装好了node.js，和一些依赖，所以在这就直接创建vue项目了。
可参考：http://www.jianshu.com/p/de410cefd788

第二步：了解vue如何创建多页面实例（百度一个实例）

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

// 路由跳转
Vue.prototype.$goRoute = function (index) {
  this.$router.push(index)
}

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

app.vue

rooter-->index.js

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import page01 from '@/components/page01'
import page02 from '@/components/page02'
import page01A from '@/components/page01/page01-A'
import page01B from '@/components/page01/page01-b'
import pageEnd from '@/components/page01/B/end'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/page01',
      name: 'page01',
      component: page01,
      children: [
        {
          path: 'page01-a',
          name: 'page01A',
          component: page01A
        },
        {
          path: 'page01-b',
          name: 'page01B',
          component: page01B,
          children: [
            {
              path: 'end',
              name: 'pageEnd',
              component: pageEnd
            }
          ]
        }
      ]
    },
    {
      path: '/page02',
      name: 'page02',
      component: page02
    }
  ]
})

挑出一个Home.vue看看代码：

第三步：引入Bootstrap，并使用

在这里虽然下载，我选择了是cdn。在index.html里添加：

在app.vue里添加：

 
    （默认样式）Default
    
    （首选项）Primary

结果显示：

由于在获取数据这一方面还需要研究研究，所以还得花点时间去看看vuede系统点的知识……