first commit

src/App.vue

@@ -1,28 +1,16 @@
 <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
-  }
 }
 </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/components/A.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <p class="title">这是标题</p>
+    </div>
+</template>
+<style scoped>
+.title{
+    font-size: 108px;
+}
+</style>
+<script>
+export default {
+    
+}
+</script>

src/components/Msg.vue

@@ -0,0 +1,23 @@
+<template>
+<div>
+    <button class="name">按钮1</button>    
+    <button>按钮2</button>
+    <Title class="a"></Title>
+</div>
+</template>
+<style scoped>
+.name{
+    color: red;
+}
+.a >>> .title{
+    font-size: 10px;
+}
+</style>
+<script>
+import Title from "./A.vue"
+export default {
+    components:{
+        Title
+    }
+}
+</script>

src/main.js

@@ -1,8 +1,18 @@
 import Vue from 'vue'
 import App from './App.vue'
-
+import Router from "vue-router"
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);
+Vue.use(Router)
+import router from "./router/index.js"
+import store from "./store/index.js"
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+  router,
+  store,
+  render: (h) =>{ 
+    return h(App)
+  },
 }).$mount('#app')

src/router/index.js

@@ -0,0 +1,27 @@
+import Router from "vue-router"
+import store from "@/store/index.js"
+let router = new Router({
+    routes:[
+        {
+            path:"/",
+            component:() => import("../views/index.vue")
+        },
+        {
+            path:"/login",
+            component:() => import("@/views/login.vue")
+        }
+    ]
+})
+
+router.beforeEach((to, from, next) => {
+    console.log(to.path,store.state.quanxian)
+    if(store.state.quanxian){
+        next()
+    }else if(to.path != "/login"){
+        router.push("/login")
+    }else{
+        next()
+    }
+})
+
+export default router

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from "vue"
+import Vuex from "vuex"
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+    state: {
+        quanxian: false
+    },
+    mutations: {
+        setquanxian(state,data){
+            state.quanxian = data
+        }
+    }
+})
+export default store

src/views/index.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+        这是首页
+        {{$store.state.quanxian}}
+    </div>    
+</template>
+<style scoped>
+
+</style>
+<script>
+export default {
+    
+}
+</script>

src/views/login.vue

@@ -0,0 +1,62 @@
+<template>
+    <div style="" class="login">
+       
+        <el-form class="box" label-position="left">
+            <el-form-item label="用户名" style="width:90%">
+                <el-input v-on:click="login"  v-model="username" placeholder="请输入内容"></el-input>
+            </el-form-item>
+            <el-form-item label="密码" style="width:90%">
+                <el-input @keyup.enter.native="login" placeholder="请输入密码" v-model="password" show-password ></el-input>
+            </el-form-item>
+         
+            </el-form>
+    </div>    
+</template>
+<style scoped>
+.login{
+display:flex;align-items: center;justify-content: center;height:100vh; 
+background-image: url("../assets/back.jpg");
+}
+.box{
+    border: 1px solid #ececec;
+    height: 200px;
+    width: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin: auto;
+    background-color: #ececec;
+    border-radius: 10px;
+    opacity: 0.8;
+}
+.hangnei{
+    width: 60%;
+}
+</style>
+<script>
+export default {
+    data(){
+        return {
+            username:"",
+            password: ""
+        }
+    },
+    methods:{
+        login(){
+            console.log("登录")
+            if(this.username =="admin" && this.password =="admin"){
+                this.$message({
+                    message: '登录成功',
+                    type: 'success'
+                });
+                this.$store.commit("setquanxian",true)
+                this.$router.push("/")
+
+            }else{
+                this.$message.error('登录失败');
+            }
+        }
+    }
+}
+</script>