接着上两篇文章继续讲，附上上两篇的地址，没看过的同学可以去看看。今天主要讲解一下登录组件部分和下载部分，也是最简单部分，今天讲完之后，作者需要潜心修炼一下后端，争取能做到和数据库进行交互，到时候再来接着写。
基于Vue,Vue-router,Vuex的简书网站模仿(二)
基于Vue,Vue-router,Vuex的简书网站模仿(一)
登陆界面
由于比较简单，就不画辅助线了，可以看到登录组件部分有两个功能，登录和注册，需要根据用户的点击来切换页面内容。直接上代码：
<template><div class="login-container"><div class="login-logo"></div><div class="login-header"><a :class="{active: loginway == 'login'}" @click="changeLogin('login')"> 登录 ·</a><a :class="{active: loginway == 'register'}" @click="changeLogin('register')"> 注册 </a></div><div class="login-input" v-if="loginway === 'login' "><form class="form_login" accept-charset="UTF-8" method="post"><div class="username"><span class="span1"><i class="fa fa-user"></i></span><input type="text" name="register_name" placeholder="选一个昵称" class="span2"></div><div class="password"><span class="span1"><i class="fa fa-unlock-alt"></i></span><input type="password" name="register_password" placeholder="密码" class="span2"></div><button class="login-btn btn" type="submit"><span>登录</span></button><div class="login-control" style="color:#555555;font-size:12px;"><span style="float:left" class="checkbox" :class="{checked: checked === true}"@click="checked = !checked"><input type="checkbox" style="position: absolute; opacity: 0;" checked="checked"><ins class="check"></ins></span><span style="float:left">记住我</span><span style="float:right"><a href="#" style="color:#555555">忘记密码</a></span></div></form></div><div class="login-input" v-if="loginway === 'register'"><form class="form_register" accept-charset="UTF-8" method="post"><div class="email"><span class="span1"><i class="fa fa-envelope-o"></i></span><input type="text" name="email_adress" placeholder="你的邮件地址" class="span2"></div><div class="username"><span class="span1"><i class="fa fa-user"></i></span><input type="text" name="sign_in[name]" placeholder="手机号码/电子邮件" class="span2"></div><div class="password"><span class="span1"><i class="fa fa-unlock-alt"></i></span><input type="password" name="sign_in[password]" placeholder="密码" class="span2"></div><button class="register-btn btn" type="submit"><span>注册</span></button><p class="register_text">点击 “注册” 或下方社交登录按钮，即表示您同意并愿意遵守简书 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a> 。</p></form></div> <div class="login-way"><h5>您还可以通过以下方式登录</h5><ul><li class="qqicon"><i class="fa fa-qq"></i></li><li class="weiboicon"><i class="fa fa-weibo"></i></li><li class="wechaticon"><i class="fa fa-wechat"></i></li><li class="googleicon"><i class="fa fa-google-plus"></i></li><li class="githubicon"><i class="fa fa-github"></i></li></ul></div></div></template>
<script>
import { changeLogin } from '../vuex/actions'export default{data () {let checked = 'true'return {checked}},vuex:{getters:{loginway: state => state.loginway},actions:{changeLogin}}}
</script>可以看到我这里页面内容的方式是通过vue的v-if功能来进行显示不同的内容，而V-if内的变量我是通过vuex的getters进行获取的，为什么这么做呢？因为如果我仅仅是在当前页面切换的话是不用这么干的，但是我们在App.vue里提供了注册按钮，如果不通过VUEX的话，这个注册按钮点进来还是会显示登录界面，而不是注册界面，或者你也可以用事件分发把这个loginway参数分发出去，但是那样做太麻烦，所以我在state里面新建了一个loginway变量，这样我不管在哪里点击注册或者登录事件，都能显示对应的界面，下面是actions.js部分代码和store.js部分代码：
export const changeLogin = ({ dispatch },loginway) => {dispatch('CHANGELOGIN',loginway)
}这是store.js
const state = {loginway = 'login'
}
const mutations = {CHANGELOGIN (statem, loginway){state.loginway = loginway}
}做完这些，一个登录界面的UI就做好了。
下载界面
这部只需要在router.map下添加一个路由即可，没有数据的交互，直接给代码吧：
main.js部分
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'import home from './components/Home.vue'
import topic from './components/Topic.vue'
import article from './components/Article.vue'
import bonus from './components/Bonus.vue'
import login from './components/Login.vue'
import topic_article from './components/Topic_article.vue'
import download from './components/Download.vue'Vue.use(VueRouter)const router = new VueRouter()router.map({'/home': {component: home,subRoutes: {'/article': {component: article}}},'/topic': {component: topic,subRoutes: {'topic_article': {component: topic_article}}},'/bonus': {component: bonus},'/login': {component: login},'/download': {component: download}
})router.redirect({'*':'/home/article'
})router.start(App,'app')
router.go('/home/article')可以看到新加了一个download路由。接下来是download.vue部分：
<template><div class="download_container"><div class="download_content"><div class="page-left"><div class="logo"><img src="../../static/jianshu_logo.jpg"></div><div class="download_btn"><ul class="download"><li><a href="#"><i class="fa fa-android"></i>Android版</a></li><li><a href="#"><i class="fa fa-mobile"></i>iPhone版</a></li></ul><img src="../../static/download_img1.png"></div><ul class="share_list"><li>关注我们</li><li><i class="fa fa-qq"></i></li><li><i class="fa fa-weibo"></i></li><li><i class="fa fa-wechat"></i></li></ul> </div><div class="app-img"><img src="../../static/download_img2.png"></div> </div></div>
</template>到这里，一个比较简单的简书首页前端页面就做完成了，相信你跟着我的这些步骤过一遍的话，对于vue-router和vuex应该有一部分了解了，简单来说就是好玩，好学。希望我能通过我的文章帮你打开进入vue的大门，还是那句话球求收藏，错误的地方请斧正！！！
