1. 程式人生 > >前端與移動開發之vue-day6(2)

前端與移動開發之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>