前端与移动开发之vue-day6（2）

在使用webpack构建的Vue项目中使用模板对象？
在webpack.config.js中添加resolve属性：

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

ES6中语法使用总结
使用 export default 和 export 导出模块中的成员; 对应ES5中的 module.exports 和 export
使用 import from 和 import '路径' 还有 import {a, b} from '模块标识' 导入其他模块
使用箭头函数：(a, b)=> { return a-b; }

在vue组件页面中，集成vue-router路由模块
vue-router官网
导入路由模块：

import VueRouter from 'vue-router'
安装路由模块：

Vue.use(VueRouter);
导入需要展示的组件:

import login from './components/account/login.vue'

import register from './components/account/register.vue'
创建路由对象:

var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});

将路由对象，挂载到 Vue 实例上:

var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router // 将路由对象，挂载到 Vue 实例上

});

改造App.vue组件，在 template 中，添加router-link和router-view：

<router-link to="/login">登录</router-link>

   <router-link to="/register">注册</router-link>

   <router-view></router-view>