vuejs 学习（一）

1.安装vue.js

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

2.如今安装的是2.x版本，如果是根据视频学习，会发现有滞后，讲解的是1.x的甚至更早的。那么问题来了
router是什么东西，一看就能理解是路由，那具体是什么个过程。

我在慕课网上学习的，视频中安装之后，有hello.vue没有router,我们先暂时不考虑，直接去看main.js

main.js
视频上的

import Vue from 'vue'
import App from './App'


/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App }
})

我们安装的

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

el我们不用管，很容易理解，前者是以body为容器，后者是以id为app的div为容器。
而router则是多出来的，我们暂且不考虑。
那template: ‘‘,其实这个你可以删除，后在

里加上,效果是一样的，视频里的就是放在了index.html里了。

那总的说就是多了router，我们先去分析组件App是否不同

App.vue

视频里

<template>
  <div id="app">
    <img src="./assets/logo.png" class="logo">
    <hello></hello>
    .....
  </div>
</template>

<script>
import Hello from './components/Hello'
export default {
  components:{hello}
}
</script>
....

我们安装的

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

那显而易见，我们主要是用<router-view></router-view>取代了<hello></hello>....等内容，
视频里用

import Hello from './components/Hello'
export default {
  components:{hello}
}

直接将hello.vue的内容直接导入了app.vue,而我们安装的则没有，用了，
那接下来我们分析router

router.js里

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

这里的意思就是把routes里的参数导出，到main.js里使用route来使用。
name没别的意思，只是名字属性，删除后发现程序正常运行。

import router from './router'
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

发现路由的routes是数组，其实就是可以把多个组件在这里管理。然后利用routes来对外使用，而不用去直接边界app.vue，
2.x里，我的感觉就是app.vue主要起一个汇总的作用，相当于一个包裹的外层包装，而这个包装是一开始就准备好，
没什么特别原因，我们不用动app.vue。子组件的管理统一由路由来管理。

一对比，发现app.vue里面现在基本只是个框架，内容全部被<router-view></router-view>代替了，不像视频里那样将很多代码直接嵌入在app.vue里了。

访问index.html后，main.js会将app组件显示，通过<App></App>进入app.vue之后，会再通过<router-view></router-view>进入router里的index.js从而进入hello.vue组件.进而展现整个页面。