搭建初步框架

src/App.vue

@@ -1,28 +1,15 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
+  name: 'App'
 }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+
 </style>

src/assets/css/style_public.css

@@ -0,0 +1,48 @@
+* {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  
+  li {
+    list-style: none;
+  }
+  
+  a {
+    text-decoration: none;
+  }
+  
+  button {
+    outline: none;
+    user-select: none;
+  }
+  
+  input {
+    outline: none;
+  }
+  
+  .fl {
+    float: left;
+  }
+  
+  .fr {
+    float: right;
+  }
+  
+  /* 清除浮动 */
+  .clearfix:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+  
+  .el-message-box__wrapper {
+      top: -500px;
+  }
+  
+  .el-card {
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important
+  }

src/main.js

@@ -1,8 +1,19 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
+import store from './store'
+import { Button, Select, Input, InputNumber } from 'element-ui';
+import './assets/css/style_public.css'
 
 Vue.config.productionTip = false
 
+Vue.use(Button)
+Vue.use(Select)
+Vue.use(Input)
+Vue.use(InputNumber)
+
 new Vue({
+  router,
+  store,
   render: h => h(App),
 }).$mount('#app')

src/pages/index/IndexPage.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="hello">
+    <el-input placeholder="请输入用户名" v-model="username" clearable> </el-input>
+    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IndexPage",
+  props: {
+    
+  },
+  data() {
+    return {
+      username: '',
+      password: ''
+    }
+  }
+};
+</script>
+
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/pages/login/Login.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/pages/login/LoginPage.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="hello">
+    <el-input placeholder="请输入用户名" v-model="username" clearable> </el-input>
+    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LoginPage",
+  data() {
+    return {
+      username: '',
+      password: ''
+    }
+  }
+};
+</script>
+
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/pages/login/RegisterPage.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="hello">
+    <el-input placeholder="请输入用户名" v-model="username" clearable> </el-input>
+    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
+    <el-input placeholder="请确认密码" v-model="password2" show-password></el-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RegisterPage",
+  data() {
+    return {
+      username: '',
+      password: '',
+      password2: ''
+    }
+  }
+};
+</script>
+
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/router.js

@@ -0,0 +1,38 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import LoginPage from './pages/login/LoginPage.vue'
+import RegisterPage from './pages/login/RegisterPage.vue'
+import IndexPage from './pages/index/IndexPage.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+    {
+        path: '/',
+        redirect: '/login'
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: LoginPage
+    },
+    {
+        path: '/register',
+        name: 'RegisterPage',
+        componenr: RegisterPage
+    },
+    {
+        path: '/index',
+        name: 'index',
+        component: IndexPage
+    }
+]
+
+const router = new VueRouter({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes
+})
+
+export default router