前端与移动开发之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>