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

    一、搭建项目

    1.1 安装 Element-UI

    先确保是否安装了vue-cli脚手架工具 !!!

    安装vue脚手架可以看看我的上一篇博客

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

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

    1.2 导入组件

    打开 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

    1.3 创建登录、注册界面

    我在src目录下新建了一个views专门存放一些界面组件，界面可自己设计，以下是我编写的：

    1. 创建用户登录组件Login.vue

    2.  
    3. <script>
    4.   export default {
    5.     name: 'Login',
    6.     data() {
    7.       return {
    8.         username: '',
    9.         password: ''
    10.       }
    11.     },
    12.     methods: {
    13.       gotoRegister() {
    14.         this.$router.push("/Register");
    15.       }
    16.     }
    17.   }
    18. script>
    19.  
    20. <style scoped>
    21.   .login-wrap {
    22.    box-sizing: border-box;
    23.    width: 100%;
    24.    height: 100%;
    25.    padding-top: 10%;
    26.   background-color: #3b7cf5;
    27.    background-repeat: no-repeat;
    28.    background-position: center right;
    29.    background-size: 100%;
    30.   }
    31.  
    32.   .login-container {
    33.    border-radius: 10px;
    34.    margin: 0px auto;
    35.    width: 350px;
    36.    padding: 30px 35px 15px 35px;
    37.    border: 1px solid #eaeaea;
    38.    text-align: left;
    39.    background-color: rgba(229, 229, 229, 0.8);
    40.   }
    41.  
    42.   .title {
    43.     margin: 0px auto 40px auto;
    44.     text-align: center;
    45.     color: #0b0b0b;
    46.   }
    47. style>

     创建用户注册组件Register.vue

    2.  
    3. <script>
    4.   export default {
    5.     name: 'Register',
    6.     data() {
    7.       return {
    8.         username: '',
    9.         password: ''
    10.       }
    11.     },
    12.     methods: {
    13.       gotoLogin() {
    14.         this.$router.push("/");
    15.       }
    16.     }
    17.   }
    18. script>
    19.  
    20. <style scoped>
    21.   .login-wrap {
    22.     box-sizing: border-box;
    23.     width: 100%;
    24.     height: 100%;
    25.     padding-top: 10%;
    26.  
    27.     background-color: #3b7cf5;
    28.     background-repeat: no-repeat;
    29.     background-position: center right;
    30.     background-size: 100%;
    31.   }
    32.  
    33.   .login-container {
    34.     border-radius: 10px;
    35.     margin: 0px auto;
    36.     width: 350px;
    37.     padding: 30px 35px 15px 35px;
    38.     border: 1px solid #eaeaea;
    39.     text-align: left;
    40.     background-color: rgba(229, 229, 229, 0.8);
    41.   }
    42.  
    43.   .title {
    44.     margin: 0px auto 40px auto;
    45.     text-align: center;
    46.     color: #0b0b0b;
    47.   }
    48. style>

    注1：