前端與移動開發之vue-day6(2)
阿新 • • 發佈:2018-11-21
在使用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>