• ElementUI实现登录注册啊，axios全局配置，CORS跨域

    一，项目搭建

    认识ElementUI

    ElementUI是一个基于Vue.js 2.0的桌面端组件库，它提供了一套丰富的UI组件，包括表格、表单、弹框、按钮、菜单等常用组件，具备易用、美观、高效、灵活等优势，能够极大的提高Web应用的开发效率。ElementUI的文档非常详细，示例丰富，易于入手，同时也支持自定义主题，开发者可以根据自己的需要进行调整。ElementUI同时也支持按需加载，可以减少项目体积，提高网页加载速度。由于其易用性和高效性，ElementUI已成为Vue.js开发的首选UI组件库之一。

    2.安装ElementUI

    安装ElementUI必须借助于vue-cli工具如果没有可观看我上一篇博客

    构建好项目后通过npm安装element-ui

    cd 项目根路径                               #进入新建项目的根目录
    npm install element-ui -S                  #安装element-ui模块

     下载好了后进入项目查看package.json查看是否成功（因为有一次某人下载好了cmd窗口并没有提示下载成功）

     3.导入组件

    打开 src目录下的main.js，该文件是项目的入口文件，所以在这里导入，其他组件均可使用，不用再导入。

    1. import Vue from 'vue'
    2.  
    3. //新添加1
    4. import ElementUI from 'element-ui'
    5. //新增加2，避免后期打包样式不同，要放在import App from './App';之前
    6. import 'element-ui/lib/theme-chalk/index.css'
    7.  
    8. import App from './App'
    9. import router from './router'
    10.  
    11. Vue.use(ElementUI)   //新添加3
    12. Vue.config.productionTip = false

     4.创建登录、注册界面

    在目录下新建了一个views专门存放一些界面组件，界面可自己设计，列如：

    登录界面：

    1.  
    2. <template>
    3.   <div class="login-wrap">
    4.     <el-form class="login-container">
    5.       <h1 class="title">用户登录h1>
    6.       <el-form-item label="">
    7.         <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off">el-input>
    8.       el-form-item>
    9.       <el-form-item label="">
    10.         <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off">el-input>
    11.       el-form-item>
    12.       <el-form-item>
    13.         <el-button type="warning" style="width:100%;" @click="doSubmit()">提交el-button>
    14.       el-form-item>
    15.       <el-row style="text-align: center;margin-top:-10px">
    16.         <el-link type="primary">忘记密码el-link>
    17.         <el-link type="primary" @click="gotoRegister()">用户注册el-link>
    18.       el-row>
    19.     el-form>
    20.   div>
    21. template>
    22.  
    23. <script>
    24.   export default {
    25.     name: 'Login',
    26.     data() {
    27.       return {
    28.         username: '',
    29.         password: ''
    30.       }
    31.     },
    32.     methods: {
    33.       gotoRegister() {
    34.         this.$router.push("/Register");
    35.       }
    36.     }
    37.   }
    38. script>
    39.  
    40. <style scoped>
    41.   .login-wrap {
    42.    box-sizing: border-box;
    43.    width: 100%;
    44.    height: 100%;
    45.    padding-top: 10%;
    46.  
    47.    /* background-color: #3b7cf5; */
    48.    background-repeat: no-repeat;
    49.    background-position: center right;
    50.    background-size: 100%;
    51.   }
    52.  
    53.   .login-container {
    54.    border-radius: 10px;
    55.    margin: 0px auto;
    56.    width: 350px;
    57.    padding: 30px 35px 15px 35px;
    58.    border: 1px solid #eaeaea;
    59.    text-align: left;
    60.    background-color: rgba(229, 229, 229, 0.8);
    61.   }
    62.  
    63.   .title {
    64.     margin: 0px auto 40px auto;
    65.     text-align: center;
    66.     color: #0b0b0b;
    67.   }
    68. style>

    注册界面：

    1. <template>
    2.   <div class="login-wrap">
    3.     <el-form class="login-container">
    4.       <h1 class="title">用户注册h1>
    5.       <el-form-item label="">
    6.         <el-input type="text" v-model="username" placeholder="注册账号" autocomplete="off">el-input>
    7.       el-form-item>
    8.       <el-form-item label="">
    9.         <el-input type="password" v-model="password" placeholder="注册密码" autocomplete="off">el-input>
    10.       el-form-item>
    11.       <el-form-item>
    12.         <el-button type="warning" style="width:100%;" @click="doSubmit()">提交el-button>
    13.       el-form-item>
    14.       <el-row style="text-align: center;margin-top:-10px">
    15.         <el-link type="primary">忘记密码el-link>
    16.         <el-link type="primary" @click="gotoLogin()">用户注册el-link>
    17.       el-row>
    18.     el-form>
    19.   div>
    20. template>
    21.  
    22. <script>
    23.   export default {
    24.     name: 'Register',
    25.     data() {
    26.       return {
    27.         username: '',
    28.         password: ''
    29.       }
    30.     },
    31.     methods: {
    32.       gotoLogin() {
    33.         this.$router.push("/");
    34.       }
    35.     }
    36.   }
    37. script>
    38.  
    39. <style scoped>
    40.   .login-wrap {
    41.     box-sizing: border-box;
    42.     width: 100%;
    43.     height: 100%;
    44.     padding-top: 10%;
    45. ;
    46.     /* background-color: #3b7cf5; */
    47.     background-repeat: no-repeat;
    48.     background-position: center right;
    49.     background-size: 100%;
    50.   }
    51.  
    52.   .login-container {
    53.     border-radius: 10px;
    54.     margin: 0px auto;
    55.     width: 350px;
    56.     padding: 30px 35px 15px 35px;
    57.     border: 1px solid #eaeaea;
    58.     text-align: left;
    59.     background-color: rgba(229, 229, 229, 0.8);
    60.   }
    61.  
    62.   .title {
    63.     margin: 0px auto 40px auto;
    64.     text-align: center;
    65.     color: #0b0b0b;
    66.   }
    67. style>

    注1：