element
http://element.eleme.io/#/zh-CN/component/installation
vuerouter
https://router.vuejs.org/zh-cn/
vue构建单页面应用实战
http://www.jb51.net/article/110796.html
main.js
import Vue from 'vue'; import App from './App'; import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import VueRouter from 'vue-router' Vue.use(VueRouter); Vue.config.productionTip = false; Vue.use(ElementUI); /* eslint-disable no-new */ import Hello from './components/Hello.vue'; import Login from './components/Login.vue'; const router = new VueRouter({ mode: 'history', routes: [ { path: '/index', component: Hello },{ path: '', component: Login } ] }); new Vue({ el: '#app', router, render: h => h(App), });
App.vue
<template> <div> <router-view></router-view> </div> </template>
Login.vue
<template> <div style="margin-top:15%; margin-left:40%; "> <el-form ref="form" :model="form" label-width="80px"> <el-row> <el-col :span="7"> <el-form-item label="用户名"> <el-input v-model="form.name" type="text"></el-input> </el-form-item></el-col> </el-row> <el-row> <el-col :span="7"> <el-form-item label="密码"> <el-input v-model="form.password" type="password"></el-input> </el-form-item></el-col> </el-row> <el-row> <el-col :span="2" :offset="3"> <el-button type="primary" style="width:100%" @click="login" >登录</el-button> </el-col> </el-row> </el-form> </div> </template> <script> export default { data() { return { form: { name: 'hgf', password:'123456' } } }, methods : { login : function () { this.$router.push({path:'/index'}); } } } </script> <style > </style>
Hello.vue
<template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'hello', data() { return { msg: '请开始你的表演', }; } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style> </style>