vue后台管理系统学习(4)--登录页面改造

 今天又看了花裤衩的项目，感觉受益匪浅，顺便再研究下vue,

项目地址：https://github.com/PanJiaChen/vue-element-admin

 大家下载项目的话，建议下载 i18n这个分支，这个分支默认是中文版，废话不说，切入正题

 1.首先看下登录也的效果图

   把页面中多余的东西都去除掉了，保持清爽

   

2. 代码

    $t 表示使用了i18n国际化组件，使用这个标识是为了方便国际化

     {{ $t('login.title') }}    login这个变量是在src/lang/zh.js这个文件中定义的，里面包括多个变量，大家可以打开这个文件看下

    

  login: {
    title: '百事帮物业运行后台',
    logIn: '登录',
    username: '账号',
    password: '密码',
    any: '随便填',
    thirdparty: '第三方登录',
    thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
  },

3. 应用文件的路径

   

import LangSelect from '@/components/LangSelect'

@等价于 /src 这个目录 ,表示在这个目录下的文件夹

import SocialSign from './components/SocialSignin

./: 当前目录下

../: 父级目录